js, routing to different modules.

Here is the code:

    //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;

And here is the 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>

Sample Image:

Sample Image after buttons is clicked:

My problem is that, this becomeguide.js is from admin.js and becomeguide.js has it own navigation too, from the when I click the navigation from becomeguide.js nothing happens, its will no go to expected view. how can i fix this issue? Thank you!

CodePudding user response：

Issue

1. Using the exact prop on the outer base route will necessarily preclude it from matching any sub routes. In other words, since the url path no longer exactly matches "/become-guide" when attempting to render a sub-route, i.e. like "/become-guide/see-all", that BecomeGuide is unmounted, and thus doesn't/can't render the nested routes.
2. There should be only one router rendering/providing a routing context to the app, so the nested BrowserRouter in BecomeGuide is unnecessary and is actually blocking the outer router from properly handling the nested routes.

Solution

Admin - Remove the exact prop on any routes rendering subroutes.

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>  
  )
}

BecomeGuide - Remove the nested router. You can also probably remove the exact prop on these routes as well since they all have the same path specificity for matching.

<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>