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 {&nbsp; render = () => {&nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<React.Fragment>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div className="navmenu">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<NavLink to="/portal/messaging" activeClassName="selected">Messaging</NavLink>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<NavLink to="/portal/files" activeClassName="selected"></NavLink>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<NavLink to="/portal/payledger" activeClassName="selected"></NavLink>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<div className="apparea">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<Switch>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<Route path="/portal/messaging" component={Messaging}></Route>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<Route path="/portal/files" component={Files}></Route>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<Route path="/portal/payledger" component={PayLedger}></Route>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</Switch>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </React.Fragment>&nbsp; &nbsp; &nbsp; );&nbsp; }}