web-dev-qa-db-ja.com

React.jsに複数の<Switch>を含めることは可能ですか？

私はReact Reduxなしのプロジェクトを構築しています。

2つ、この場合は3つの異なるスイッチが欲しい

1番目のスイッチは、ユーザーがログインすると、ホームページ（通常のWebサイト）とUserPage（ダッシュボード）を切り替えることができます...次に、これもスイッチャーになるため、ホームはホームコンポーネントを切り替え、ユーザーページは切り替えますUserPageコンポーネント。これは可能ですか？

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

これは、プロジェクトがどのように見え、構造化されるべきかです。

javascriptreactjsreact-routerreact-router-v4
9
Amel Amcë Muminovic

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