Multi-layer nested routing sub-routing of react-router 4 is not implemented.

at first, I want to implement a route nesting. There is no problem with (App) on the main route, so it can be realized.
then I want to do a route nesting on the child route, but < Route / > does not show it. 


const App = () => (
     <Switch>
      <Route exact path="/" component={Index}/>
      <Route strict exact path="/user" component={User} />
      <Route strict exact path="/user/details" component={Details} />
     </Switch>
               
)
export default App   

class Details extends Component{   

    componentWillMount(){
        console.log("details")
      }

    render(){

        return (
            <div>
                <ul>
                    <li><Link to="/user/details/msg">click msg</Link></li>
                    <li><Link to="/user/details/abt">cliock abt</Link></li>
                </ul>
                <Route path="/user/details/msg" component={Msg} />
                <Route path="/user/details/abt" component={Abt} />
            </div>
        )
    }
}

export default Details;

when you click

  • , it is always transferred to a new route. I don"t know why < Route / > is not rendered;

    I hope your seniors will give us some advice and thank you;

    • React-router4 react.js
    Apr.28,2021

    . Using nested routing exact, cannot be used at the parent because when you match the route, the path adds a child route, resulting in a mismatch of the parent routing path so that the parent and child components cannot be displayed. For example, your / user/details uses exact, when the path changes to / user/details/msg does not match / user/details, so you cannot render Details and msg is in Detail, so you will not render

    < Route strict exact path= "/ user/details" component= {Details} / >
    try to remove exact from it.
    I encountered a similar problem, and that's how it was solved.

    switch is a single recommendation to put Route together somewhere else and use Link or this.props.history.push () to jump Route plus exact to indicate an exact match

    when you jump to / user/details/msg,
    < Route strict exact path= "/ user/details" component= {Details} / >
    does not match Details. The sub-components in Details naturally cannot be rendered.
    < Route strict exact path= "/ user" component= {User} / >
    < Route strict exact path= "/ user/details" component= {Details} / >
    Why is the routing set to be nested? it's a little strange to try
    like this. 

    const Index=()=>(<div>index</div>);
    const User=()=>(<div>user</div>);
    const Msg=()=>(<div>msg</div>);
    const Abt=()=>(<div>abt</div>);
    const Details=()=>(
            <div>
                <ul>
                    <li><Link to="/details/msg">click msg</Link></li>
                    <li><Link to="/details/abt">cliock abt</Link></li>
                </ul>
                <Route path="/details/msg" component={Msg} />
                <Route path="/details/abt" component={Abt} />
            </div>
    )
    const App = () => (
        <HashRouter>
            <Switch>
                <Route exact path="/" component={Index}/>
                <Route strict exact path="/user" component={User} />
                <Route path="/details" component={Details} />
            </Switch>
        </HashRouter>
    )

    you can use react-router-pro, just like using vue, use router, https://github.com/aiyuekuang.

    .

    Previous: The problem of asynchronously requesting data overwriting?

    Next: Realization of vue Timeline function

    css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
    © 2021 CodesHelper
    Advertising Contact us About us
    Menu