反應路由器無法加載嵌套頁面

Question

我只是無法讓反應路由器加載嵌套頁面。

我有陣營-路由器

import React from 'react'; 
import { Router, Route, IndexRoute, useRouterHistory } from 'react-router'; 
import { createHistory } from 'history'; 

import App from './components/app'; 
import Authors from'./components/authors/authorPage'; 
import About from'./components/about/aboutPage'; 

const appHistory = useRouterHistory(createHistory)({ basename: "/" }); 

const Routes =() => 
{ 
    const routes = (
     <Route path="/" component={App}> 
      <Route path="/about" component={About}/> 
      <Route path="/authors" component={Authors}/> 
     </Route> 
    ); 

    return (
    <Router history={ appHistory }> 
     {routes} 
    </Router>); 
}; 

export default Routes; 

而其得到通過在標題頁的鏈接稱爲

import React from 'react'; 
import { Router, Route, Link } from 'react-router'; 

const Header =() => 
{ 
    return (
     <nav className="navbar navbar-default"> 
      <div className="container-fluid"> 
       <a href="/" className="navbar-brand"> 
        <img src="images/pluralsight-logo.png"/> 
       </a> 
       <ul className="nav navbar-nav"> 
        <li><Link to="/">Home</Link></li> 
        <li><Link to="/about">About</Link></li> 
        <li><Link to="/authors">Authors</Link></li> 
       </ul> 
      </div> 
     </nav> 
    ); 
}; 

export default Header; 

應用組件的以下配置是

import Home from './homePage'; 
import Header from './common/header'; 

const App =() => 
{ 
    return (
     <div> 
      <Header /> 
      <div className="container-fluid"> 
       <Home/> 
      </div> 
     </div> 
    ); 
}; 

export default App; 

根應用程序加載得很好，我看到主要的根頁面。然而，單擊任何鏈接只是將地址欄更改爲該鏈接（http://localhost:9005/about），但沒有任何呈現，關於頁面從不加載。

事實上，如果我手動輸入頁面（http://localhost:9005/about）我得到的錯誤

Cannot GET /about

Answer 1

你在你期望的路徑來加載點缺失children。

const App = ({ children }) => 
{ 
    return (
     <div> 
      <Header /> 
      <div className="container-fluid"> 
       <Home/> 

       {children} <--- Route components will appear here 
      </div> 
     </div> 
    ); 
}; 

想必你不希望顯示Home，以及在同一時間其他頁面，所以更新的IndexRoute路線配置，以便Home將出現在根URL。

<Route path="/" component={App}> 
    <IndexRoute component={Home}/> 
    <Route path="/about" component={About}/> 
    <Route path="/authors" component={Authors}/> 
</Route>