ルータ4ネストされたルートがレンダリングされない

Question

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'に置き換えると '/ home/signin'は 'Home' divと 'SignIn'コンポーネントをレンダリングします。私はここで間違って何をしていますか？

Answer 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'));