React Router 4嵌套路由没有被渲染答案

【问题标题】：React Router 4 nested routes not getting renderedReact Router 4嵌套路由没有被渲染
【发布时间】：2017-12-20 11:32:59
【问题描述】：

import React, { Component } from 'react';
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';
import Home from './home/components/home'

class App extends Component {
render() {
return (
  <div className="App">

      <Router>
        <Switch>
        <Route  path="/home" component={Home}>
        </Route><!--working-->

        <!--<Route  path="/" component={Home}>
        </Route> not working -->

        </Switch>
      </Router>

  </div>
);
 }
}     


class Home extends Component{    
   render = () => {

    return (
        <div>
            <div>Home</div>
            <Route exact path={`${this.props.match.url}/signin`}   component={SignIn}>
            </Route>
        </div>

    );
 }
}

我有以下代码。在 App 组件中，我想创建嵌套路由。 '/' 是根路由， /signin 是嵌套路由。但是 /signin 不会呈现 SignIn 组件，只是呈现“Home” div。当我在 App 组件中将 '/' 替换为 '/home' 时，'/home/signin' 会呈现 'Home' div 和 'SignIn' 组件。我在这里做错了什么？

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

嵌套路由不适用于根。只需使用充当父组件的布局组件即可获得相同的结果。单击链接后，子组件将在布局组件的指定区域内呈现。我在 CodePen 上为你创建了一个示例：https://codepen.io/anon/pen/EXMJzG

const {
  BrowserRouter, 
  Link, 
  Route
} = ReactRouterDOM;
const Router = BrowserRouter;

// App
class App extends React.Component{
  render(){
    return(
    <Router>
      <div className="container">
        <Layout>
          <Route exact path="/" component={Home} /> 
          <Route exact path="/signin" component={SignIn} /> 
          <Route exact path="/cake" component={Cake} /> 
        </Layout>
      </div>
    </Router>
    )
  }
}

//Layout
const Layout = ({children}) => (
  <div>
    <header>
      <h1>Header</h1>
    </header>
    <nav>
      <Link to="/">Home</Link>
      <Link to="/signin">Sign In</Link>
      <Link to="/cake">Cake</Link>
    </nav>
    <section>
      {children}
    </section>
    <footer>
      <p>Footer</p>
    </footer>
  </div>
)

//Home
const Home = ()=>(
  <div>
    <h1>Hello World</h1>
  </div>
)

//SignIn
const SignIn = ()=>(
  <div>
    <h1>Sign In</h1>
  </div>
)

//Cake
const Cake = ()=>(
  <div>
    <h1>Free Cake</h1>
  </div>
)

ReactDOM.render(<App />,document.getElementById('app'));

【讨论】：