ReactJS路由页面刷新

151

Elcid_91

当前使用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>
        );
     }

以下是“门户”组件：

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

加载门户组件并刷新网页后，该页面变为空白。我假设这与嵌套路由有关？任何有关如何解决它的帮助将不胜感激。

内曼贾·拉扎列维奇（Nemanja Lazarevic）

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

这是工作代码和盒子示例。确保不要把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>
      );
  }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。