React Router v4爲React.js SPA中的子組件渲染空白頁面

我們正在將React SPA嵌入到不是根目錄的URL中的網站上。我在設置路由時遇到問題，因此它可以保留頁面首次啓動的路徑。例如，該應用程序在mysite.com/c/{customerId}加載。一旦我進入應用程序並導航到設置頁面，我希望URL爲mysite.com/c/{customerId}/settings。React Router v4爲React.js SPA中的子組件渲染空白頁面

問題： 爲什麼我點擊我的鏈接時會得到完全空白的頁面？

下面是我目前的配置，我們使用的是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> 
);

}

來源

2017-06-16 Jeremy K

SettingsMain是什麼樣子的？ – Shadowfool

是否定義了'this.state.userId'？ – BravoZulu

我用SettingsMain更新了我的帖子。 'this.state.userId'似乎已被定義。如果我停在App類的斷點處，它似乎在'this.props.match.params.userId'中初始化 –

該解決方案使用BrowserRouter中的basename prop。一旦我設置好並從我的路線中刪除了基本網址，事情就開始奏效。

來源

2017-06-19 16:55:49

React Router v4爲React.js SPA中的子組件渲染空白頁面

回答

相關問題