reactjs - 反应路由器错误

Question

反应路由有问题。试图在我的应用程序的个人资料页面中制作标签，但我遇到了一些问题......

它同时工作和窃听..

当我点击“仪表板”选项卡时，网址如下所示：'/profile/dashboard'，当我刷新页面时，内容从屏幕上消失，只是缩放：

代码：

const App = () => {
 
  return (
    <BrowserRouter>
      <Switch>
        <Route path={'/profile'}
        render={(props) => (
          <ProfilePage {...props}/>
        )}/>
      </Switch>
    </BrowserRouter>
  );
}

const ProfilePage = () => {

  return (
    <>
      <ProfileHeader />
      <Sidebar />
      <div className="content">
        <Switch>
          <Route 
          path={'profile/dashboard'} 
          render={(props) => (
            <Dashboard {...props}/>
          )} />
          
        </Switch>
      </div>
    </>
  );
};

const Sidebar = () => {

  return (
    <aside className="profile__aside">
      <nav className="profile__menu">
        <Link to="/profile/dashboard" className="profile__tab"><i className="fas fa-chart-line"></i><span className="profile__title">Dashboard</span></Link>
        <Link className="profile__tab"><i className="fas fa-flask"></i><span className="profile__title">Lab Results</span></Link>
        <Link className="profile__tab"><i className="fas fa-box"></i><span className="profile__title">Order</span></Link>
        <Link className="profile__tab"><i className="fas fa-cogs"></i><span className="profile__title">Settings</span></Link>
      </nav>
    </aside>
  )
}

标签： reactjsroutesreact-routerrouter

Answer 1

在配置文件组件从配置文件/仪表板更改路径到/仪表板，您可以从下面复制 ProfilePage 组件

 const ProfilePage = () => {
      return (
        <>
          <ProfileHeader />
          <Sidebar />
          <div className="content">
            <Switch>
              <Route 
              path={'/dashboard'} 
              render={(props) => (
                <Dashboard {...props}/>
              )} />
              
            </Switch>
          </div>
        </>
      );
   };