是否可以有多个<Switch>在 React.js 中？

Question

我正在构建一个没有 Redux 的 React 项目。

我希望有两个，或者在这种情况下有 3 个不同的开关

1st Switch 可以在用户登录时在 Home page（普通网站）和 UserPage（Dashboard）之间切换...然后每个都是 Switchers，所以 Home 会在 Home 组件之间切换，UserPage 会在它们之间切换用户页面组件。 这甚至可能吗？

                        Main Switcher 
     Home Page (Switch)              Dashboard
Home About Contact, Careers     My Profile, Courses, Classes, Donations...

这就是项目的外观和结构。

Answer 1

您可以根据需要使用任意数量的Switch组件。 它只是呈现其下指定的所有路由的第一个匹配项。

在您的情况下，应该按照这些方式进行操作：

const Home = ({match}) => {
  return(
    <Switch>
      <Route path={match.url} exact={true} component={HomeDefaultComponent} />
      <Route path={`${match.url}/about`} exact={true} component={About} />
      <Route path={`${match.url}/contact`} exact={true} component={Contact} />
      <Route path={`${match.url}/careers`} exact={true} component={careers} />
    </Switch>
  );
};

const Dashboard = ({match}) => {
  return(
    <Switch>
      <Route path={match.url} exact={true} component={DashboardDefaultComponent} />
      ... other Dashboard paths like Home component above
    </Switch>
  );
};

const App = () => {
  return(
    <Switch>
      <Route path='/home' component={Home} />
      <Route path='/dashboard' component={Dashboard} />
    </Switch>
  );
}