ReactJS 路由页面刷新

Question

目前正在使用 ReactJS 构建一个小型 Web 应用程序。我有以下父函数：    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>        );     }以下是“Portal”组件：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>        );    }}当加载门户组件并刷新网页时，页面变为空白。我假设这与嵌套路由有关？任何有关如何修复它的帮助将不胜感激。

Answer 1

你不需要两个<BrowserRouter />。<BrowserRouter />只需在顶级组件中定义一个即可。在react-router-dom v4+中，它<Route />就像一个常规组件，当路径与URL匹配时，您可以在组件中使用它来渲染UI。

这是工作的codesandbox示例。确保不要放在exact你的父路由上<Route />，因为当你有像这样的子路由时，/main/messaging永远<Route exact path="/main" />不会渲染，因此该路由的子路由也无法渲染。

您保持<Main />组件不变，但从exact中删除<Route path='/portal' />并更改<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>

      );

  }

}