javascript - 通过特定父组件内的路径渲染反应组件

Question

在我的 App.js 组件中，我有 Login、Register 和 Dashboard 组件的路由。如果用户成功登录，它应该将您重定向到仪表板。接下来，在仪表板中，我有侧边栏、工具栏和主要组件。在此之前一切正常。但我的目标是每当我点击侧边栏导航链接（主页 (/home)、项目 (/projects)、客户端 (/clients)... - 它们的组件名称相同）时，这些组件中的每一个都应该仅在基于 Main 的内部呈现在路径或 url 上从导航链接单击生成。我尝试为 Main 内部的每个添加路由，但在重定向整个页面后变为空白。所以我猜这不是正确的方式。希望这个问题描述足够清晰，可以理解。感谢您的任何帮助或建议。

布局

应用程序.js

 const App = () => {
      useEffect(() => {
        if (localStorage.token) {
          setAuthToken(localStorage.token);
        }
        store.dispatch(loadUser());
      }, []);
    
      return (
        <Provider store={store}>
          <Router>
            <>
              <Switch>
                <Route exact path="/" component={Dashboard} />
                <Route exact path="/register" component={Register} />
                <Route exact path="/login" component={Login} />
              </Switch>
            </>
          </Router>
        </Provider>
      );
    };

仪表板.js

const Dashboard = () => {
  return (
      <div className="dashboard">
        <Sidebar />
        <Toolbar />
        <Main />
      </div>
  );
};

Sidebar.js

const Sidebar = () => {

  return (
    <aside className="sidebar">
      <div class="logo-box">
        <span className="logo">LOGO</span>
      </div>
      <nav className="side-nav">
        <Link to="/">
          <Tooltip title="Home">
            <HomeOutlined />
          </Tooltip>
        </Link>
        <Link to="/projects">
          <Tooltip title="Projects">
            <FolderOutlined />
          </Tooltip>
        </Link>
        <Link to="/client">
          <CarryOutOutlined />
        </Link>
      </nav>
    </aside>
  );
};

主.js

const Main = () => {
  return (
    <div className="main">
      ...place to render home, projects or clients component
    </div>
  );
};

标签： javascriptreactjsroutesreact-router-dom