React-路由器错误

Question

react-routing出现问题。尝试在我的应用程序的个人资料页面中创建选项卡，但我遇到了一些问题...

它在工作的同时也有问题..

当我点击"dashboard“选项卡时，url看起来像这样：'/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>
  )
}

​

Answer 1

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

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