Как сделать страницу 404, в проекте, где внутри Route есть другие Route?

Question

[Сергей Сунцев]

Есть примерно такая структура приложения

ReactDOM.render(
  <Router history={browserHistory}>
    <Route path="/" component={Layout}>
      <Route path="/sing" component={SignUp}/>
      <Route path="/profile" component={Profile} />
      <Route path="/register_approve" component={Validation} />
      <Route path="/forgot_password" component={ForgotPassword} />
      <Route path="/confirm_email" component={ConfirmEmail} />
      <Route path="/restore_password/:token" component={RestorePassword} />
      <Route path="/confirm_invite" component={ConfirmInvite} />
      <Route path="/my-cabinet" component={Cabinet} />
      <Route path="/members" component={Members} />
      <Route path="/invite-member" component={InviteMember} />

      <Route path="/not_access" component={NotAccess} />

      <Route path="/finance" component={Finance}>
        <Route path="/finance/project" component={FinanceProject}/>
        <Route path="/finance/fixed-costs" component={FinanceFixedCost}/>
        <Route path="/finance/fixed-costs" component={FinanceFixedCost}/>
        <Route path="/finance/salary" component={FinanceSalary}/>
        <Route path="/finance/other" component={FinanceOther}/>
        <Route path="*" component={NotFound} />
      </Route>
    </Route>
  </Router>,
  document.getElementById('root')

Я понимаю, что через <Route path="*" component={NotFound} /> можно вставить страницу 404, но если я вставляю этот компонент уровнем выше. то страница finance отображается. как 404.
Сейчас 404 отображаются только внутри страниц finance/...

Вопрос в том, как добавить страницу 404 в обе связки Route?

Answer 1

[Максим]

Добавьте его 1 раз в самом низу.

ReactDOM.render(
  <Router history={browserHistory}>
    <Route path="/" component={Layout}>
      <Route path="/sing" component={SignUp}/>
      <Route path="/profile" component={Profile} />
      <Route path="/register_approve" component={Validation} />
      <Route path="/forgot_password" component={ForgotPassword} />
      <Route path="/confirm_email" component={ConfirmEmail} />
      <Route path="/restore_password/:token" component={RestorePassword} />
      <Route path="/confirm_invite" component={ConfirmInvite} />
      <Route path="/my-cabinet" component={Cabinet} />
      <Route path="/members" component={Members} />
      <Route path="/invite-member" component={InviteMember} />

      <Route path="/not_access" component={NotAccess} />

      <Route path="/finance" component={Finance}>
        <Route path="/finance/project" component={FinanceProject}/>
        <Route path="/finance/fixed-costs" component={FinanceFixedCost}/>
        <Route path="/finance/fixed-costs" component={FinanceFixedCost}/>
        <Route path="/finance/salary" component={FinanceSalary}/>
        <Route path="/finance/other" component={FinanceOther}/>
      </Route>
    </Route>
    <Route path="*" component={NotFound} />
  </Router>,
  document.getElementById('root')

Comments

[Сергей Сунцев]

Очередность влияет?

[Максим]

Сергей Сунцев: влияет