React Router v4は、React.js SPAの子コンポーネントの空白ページをレンダリングしています

Question

React SPAはルートではないURLのWebサイトに埋め込みます。私はルーティングがページを最初に開始したパスを保存できるように設定するのに問題があります。たとえば、アプリはmysite.com/c/{customerId}に読み込まれます。アプリに入って設定ページに移動すると、URLはmysite.com/c/{customerId}/settingsになります。

質問： リンクをクリックすると完全にヌルページが表示されるのはなぜですか？

以下は私の現在の構成で、Typescript、Webpack、React、およびReact-Router v4を使用しています。

エントリ・ファイル（index.tsx）

ReactDOM.render(
<BrowserRouter> 
    <Switch> 
     <Route exact path='/c/:userId' component={App}/> 
    </Switch> 
</BrowserRouter> 
, document.getElementById("root")); 

App.tsx

render() { 
     return ( 
      <div> 
       <Menu/> 
       <Sidebar/> 
       <ContentPage/> 
      </div> 
    ); 
} 

contentPage.tsx

render() { 
    return (
      <main className={styles.mainContent}> 
       <Switch> 
        <Route path='/c/:userId/settings' component={SettingsPage} /> 
        <Route path='/c/:userId/products' component={ProductPage}/> 
       </Switch> 
      </main> 
    ); 
} 

settingsPage.tsx

export const SettingsPage =() => { 
    return ( 
      <Switch> 
       <Route path='/c/:userId/settings' component={SettingsMain}/> 
       <Route path='/c/:userId/settings/:gameId' component={GameEdit}/> 
       <Route path='/c/:userId/settings/:gameId/levels' component={LevelsEdit}/> 
      </Switch> 
); 

sidebar.tsx（リンクの位置）

<Link to={`/c/${this.state.userId}/settings`} className={styles.sidebarItem}> 
          <i className={styles.sidebarIcon + " fa fa-cloud-upload"}></i><br/> 
          Settings 
        </Link> 

設定メイン

export class SettingsMain extends React.Component<Props, State> { 

public render() { 
    return (
     <div> 
      <h4>This is a Settings page</h4> 
     </div> 
); 

}

Answer 1

解決策はBrowserRouterにあるbasename小道具を使用していました。一度設定してルートからベースURLを削除すると、作業が始まりました。