反应路由器无法加载嵌套页面

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>