リアクタ・ルータ4ネストされた経路と一致しない

Question

すべての404を処理するためにグローバルなNo Match経路が必要です。一度サインインすると、すべてのプライマリビューがヘッダーとフッターで囲まれたレイアウトになります。 NotFoundコンポーネントはこのレイアウトの外側にレンダリングする必要があります。

const App =() => (
    <Switch> 
    <Route path="/register" component={Register} /> 
    <Route path="/signin" component={SignIn} /> 
    <Route path="/" component={Home} /> 
    <Route component={NotFound} /> 
    </Switch> 
); 

const Home =() => (
    <div> 
    <Header /> 
    <main> 
     <Switch> 
     <Route exact path="/" component={Main} /> 
     <Route path="/list" component={List} /> 
     <Route path="/tasks" component={Tasks} /> 
     </Switch> 
    </main> 
    <Footer /> 
    </div> 
); 

上記のサンプルコードは、私が望むようにレイアウトをレンダリングする際に動作しますが、レンダリング：ここ

はここcode sample

を「作業」へのリンクは、コードの簡単な例であります一致しないURLの空のレイアウト私はexactにアプリケーションルートパスを設定した場合、私はNOTFOUNDを取得したが、ホームのルートを失うことができるよりも

けれどもRoute S Iのリストの一番下に根を移動し、根にexactを、使用しない/使用のバリエーション予想される動作の一部を動作させることができますが、そのすべてが一元的に動作するわけではありません。

私は "/" を訪問した場合、私が見ることを期待：

Some Header Thing 
Home 
Some Footer Thing 

私は "/リスト" を訪問すれば、私が見ることを期待：

Some Header Thing 
List 
Some Footer Thing 

私は私が期待する "/登録" をご覧場合見るために：私は "/ foobarに" を訪問すれば

Register 

を私が見ることを期待：

Not Found 

Answer 1

これは以下の通りです。あなたのコードを少し微調整してルートを作っていきます。私はあまり想定したくないので、たくさんのものを再構築するのをためらっています。しかし、あなたが見ることができるように、これは 'ホーム'コンポーネントを使用して、ヘッダーとフッターを持つすべてのセクションにつながり、残りは「見つからない」状態になります。しかし、それは多くのルートで扱いにくくなる可能性のあるものを平らにします。

const App =() => (
    <BrowserRouter> 
    <Switch> 
     <Route path="/register" render={() => <div>Register</div>} /> 
     <Route path="/signin" render={() => <div>Sign in</div>} /> 
     <Route path="/list" component={Home} /> 
     <Route path="/tasks" component={Home} /> 
     <Route exact path="/" component={Home} /> 
     <Route render={() => <div>Not Found</div>} /> 
    </Switch> 
    </BrowserRouter> 
); 

const Home =() => (
    <div> 
    <header>Some Header Thing</header> 
    <main> 
     <Switch> 
     <Route path="/list" render={() => <div>List</div>} /> 
     <Route path="/tasks" render={() => <div>Tasks</div>} /> 
     <Route path="/" render={() => <div>Home</div>} /> 
     </Switch> 
    </main> 
    <footer>Some Footer Thing</footer> 
    </div> 
); 

（また、私はあなたがモデルとして与えたサンプルcodeSandboxを使用し実現 - ではないあなたのQsを - 。そのことについて申し訳ありません）

---

従うことであろう構造を考えるのもう一つの方法あなたの非常に直接的で良い説明は文字通り少しだけ。最初に登録とサインインしたユーザーが存在する必要があると書いたら、それが当てはまるとサイトのさまざまなルートが表示されます。これをルーティングの質問と考えるのではなく、それをpropsの質問と考えてください。定義済みのuserの小道はありますか？もしそうなら、ルートのコンポーネントをレンダリングします。

Appに似たコンポーネントにあなたを取るでしょう Homeは、既存のコンポーネントと Signinのバージョンをレンダリングするでしょう

const App = ({user}) => (
    <div> 
    { user ? Home : Signin } 
    </div> 
) 

：あなたは、App内のユーザーが存在するようなものをチェックするために三成分を使用することができます成分。また、「見つからない」ルートをAppのままにしておくこともできます。