ReactJS Routing Page Refresh

Question

Currently using ReactJS to construct a small web app. I have the following parent function:

    const Main = () => {
        return (
            <div className="dialog-base">
                <BrowserRouter>
                    <Switch>
                        <Route exact path="/login" component={Login}></Route>
                        <Route exact path="/login/forgot_password" component={ForgotPwd}></Route>
                        <Route exact path="/login/reset_password/:key" component={ResetPwd}></Route>
                        <Route exact path="/portal" component={Portal}></Route>
                    </Switch>
                </BrowserRouter>
            </div>
        );
     }

and the following is the "Portal" component:

class Portal extends React.Component {
    render = () => {
        return (
            <BrowserRouter basename="/main">
                 <div className="navmenu">
                     <NavLink to="messaging" activeClassName="selected">Messaging</NavLink>
                     <NavLink to="files" activeClassName="selected"></NavLink>
                     <NavLink to="payledger" activeClassName="selected"></NavLink>
                 </div>
                 <div className="apparea">
                     <Switch>
                         <Route path="/messaging" component={Messaging}></Route>
                         <Route path="/files" component={Files}></Route>
                         <Route path="/payledger" component={PayLedger}></Route>
                     </Switch>
                 </div>
            </BrowserRouter>
        );
    }
}

When the portal component is loaded and I refresh the web page, the page goes blank. I am assuming that this has something to do with the nested routing? Any help on how to fix it would be much appreciated.

Answer 1

You don't need two <BrowserRouter /> . Just define one <BrowserRouter /> in your top level component. In react-router-dom v4+ the <Route /> is just like a regular component and you can use it inside your components to render UI when the path matches the URL.

Here is the working codesandbox example . Make sure not to put exact on your parent <Route /> because when you have child routes like /main/messaging the <Route exact path="/main" /> never gets to render and therefore children of that route can't be rendered also.

You keep your <Main /> component as is but remove the exact from the <Route path='/portal' /> and change the <Portal /> .

class Portal extends React.Component {
  render = () => {
      return (
         <React.Fragment>
             <div className="navmenu">
                 <NavLink to="/portal/messaging" activeClassName="selected">Messaging</NavLink>
                 <NavLink to="/portal/files" activeClassName="selected"></NavLink>
                 <NavLink to="/portal/payledger" activeClassName="selected"></NavLink>
             </div>
             <div className="apparea">
                 <Switch>
                     <Route path="/portal/messaging" component={Messaging}></Route>
                     <Route path="/portal/files" component={Files}></Route>
                     <Route path="/portal/payledger" component={PayLedger}></Route>
                 </Switch>
             </div>
          </React.Fragment>
      );
  }
}