React路由器4个嵌套路由没有得到渲染

问题描述：

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/signin'会呈现'Home'div和'SignIn'组件。我在这里做错了什么？React路由器4个嵌套路由没有得到渲染

答

嵌套路由不能在根上工作。只需使用充当父级组件的布局组件即可获得相同的结果。一旦你点击一个链接，子组件将在布局组件中的指定区域内呈现。我创建了一个例子你就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'));

React路由器4个嵌套路由没有得到渲染

相关推荐