reactjs - React-router-dom：路由未显示预期结果

Question

js，路由到不同的模块。

这是代码：

    //Dashboard side bar navigation
const Navigation = () =>{
    return (
        <Navbar className="sidebar">
            <ul className="list-unstyled">
                <li><NavLink to="/dashboard" activeClassName='active' className="nav-link">Dashboard</NavLink></li>

                <li><NavLink to="/become-guide" activeClassName='active' className="nav-link"> Become a Guide</NavLink></li>
            </ul>
        </Navbar>
    )
}

//Admin main screen
const Admin = () => {
    return (
        <BrowserRouter>
            <div className="wrapper">
                
                <Navigation />

                <div id="content" className="m-4">
                    <Switch>
                        <Route exact path="/dashboard">
                            <Dashboard />
                        </Route>
                        <Route exact path="/become-guide">
                            <BecomeGuide />
                        </Route>
                    </Switch>
                </div>
            </div> 
        </BrowserRouter>  
    )
}

export default Admin;

这里是 becomeguide.js：

//Guide module -navigation
const NavGuide =()=>{
    return(
        <Navbar>
            <Form className="container-fluid justify-content-start">
                <NavLink to="/become-guide/see-all" activeClassName='active'>See All</NavLink>
                <NavLink to="/become-guide/approved" activeClassName='active' >Approved</NavLink>
                <NavLink to="/become-guide/pending" activeClassName='active' >Pending</NavLink>
                <NavLink to="/become-guide/rejected" activeClassName='active' >Rejected</NavLink>
            </Form>
        </Navbar>
    )
}

const GuideSeeAll = ()=> {
    return (
        <div className="bg-dark">Hello See all</div>
    );
}

const GuideApproved = ()=> {
    return (
        <div>Hello Approved</div>
    );
}

const GuidePending = ()=> {
    return (
        <div>Hello Pending</div>
    );
}

const GuideRejected = ()=> {
    return (
        <div>Hello Rejected</div>
    );
}

const BecomeGuide = () =>{
    return (
        
        <Container>
            <Row>
                <NavGuide />
            </Row>
            <Row>
                <BrowserRouter>
                    <Switch>
                        <Route exact path="/become-guide/all">
                            <GuideSeeAll />
                        </Route>
                        <Route exact path="/become-guide/approved">
                            <GuideApproved />
                        </Route>
                        <Route exact path="/become-guide/pending">
                            <GuidePending />
                        </Route>
                        <Route exact path="/become-guide/rejected">
                            <GuideRejected />
                        </Route>
                    </Switch>
                </BrowserRouter>
            </Row>

示例图片：

单击按钮后的示例图像：

我的问题是，它becomeguide.js来自admin.js并且becomeguide.js也有它自己的导航，从我点击导航时becomeguide.js什么都没有发生，它不会进入预期的视图。我该如何解决这个问题？谢谢！

标签： reactjsreact-router-dom

Answer 1

问题

1. 在外部基础路由上使用exact道具必然会阻止它匹配任何子路由。换句话说，由于 url 路径在尝试渲染子路由时不再与“/become-guide”完全BecomeGuide匹配，即像“/become-guide/see-all”一样，因此被卸载，因此不/无法渲染嵌套路由。
2. 应该只有一个路由器渲染/向应用程序提供路由上下文，因此嵌套BrowserRouter是BecomeGuide不必要的，实际上阻止了外部路由器正确处理嵌套路由。

解决方案

管理员 - 删除exact渲染子路由的任何路由上的道具。

const Admin = () => {
  return (
    <BrowserRouter>
      <div className="wrapper">
                
        <Navigation />

        <div id="content" className="m-4">
          <Switch>
            <Route path="/dashboard">
              <Dashboard />
            </Route>
            <Route path="/become-guide">
              <BecomeGuide />
            </Route>
          </Switch>
        </div>
      </div> 
    </BrowserRouter>  
  )
}

成为指南 - 删除嵌套路由器。您也可以删除exact这些路由上的道具，因为它们都具有相同的匹配路径特异性。

<Row>
  <Switch>
    <Route path="/become-guide/all">
      <GuideSeeAll />
    </Route>
    <Route path="/become-guide/approved">
      <GuideApproved />
    </Route>
    <Route path="/become-guide/pending">
      <GuidePending />
    </Route>
    <Route path="/become-guide/rejected">
      <GuideRejected />
    </Route>
  </Switch>
</Row>