Javascript ReactJS路由页面刷新

目前正在使用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>
        );
     }

const Main=（）=>{
返回(
);
}

以下是“门户”组件：

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

类门户扩展React.Component{
渲染=（）=>{
返回(
消息传递
);
}
}

加载门户组件并刷新web页面时，页面将变为空白。我假设这与嵌套路由有关？任何关于如何修复它的帮助都将不胜感激。

您不需要两个

。只需在顶级组件中定义一个

。 在react router dom v4+中，

就像一个常规组件，当路径与URL匹配时，您可以在组件内部使用它来呈现UI

这是工作代码沙盒。 确保不要将

exact

放在父级

上，因为当您有子路由（如

/main/messaging

时，

永远无法渲染，因此该路由的子路由也无法渲染

您可以将

组件保持原样，但从

中删除

精确的
，然后更改

类门户扩展React.Component{
渲染=（）=>{
返回(
消息传递
);
}
}
您不需要两个
。只需在顶级组件中定义一个
。
在react router dom v4+中，
就像一个常规组件，当路径与URL匹配时，您可以在组件内部使用它来呈现UI

这是工作代码沙盒。
确保不要将
exact
放在父级
上，因为当您有子路由（如
/main/messaging
时，
永远无法渲染，因此该路由的子路由也无法渲染

您可以将
组件保持原样，但从
中删除
精确的
，然后更改

类门户扩展React.Component{
渲染=（）=>{
返回(
消息传递
);
}
}
从门户组件中删除
不会在
apparea
分区中呈现该组件。自从您删除
浏览器路由器以来，您是否也在路由中包含
/main
？我确实这样做了。门户组件呈现良好，但单击其中一个导航链接会使页面变为空白。为了加快过程，我在回答中添加了一个代码示例。如果这对你不起作用，请告诉我。顺便说一下，在门户组件中，我将
替换为
。从门户组件中删除
不会在
appea
div中呈现该组件。自从您删除
浏览器路由器以来，您是否也在路由中包含
/main
。门户组件呈现良好，但单击其中一个导航链接会使页面变为空白。为了加快过程，我在回答中添加了一个代码示例。如果这对您不起作用，请告诉我。顺便说一下，我在门户组件中将
替换为
。
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>
      );
  }
}