How to make a 404 page in a project where there are other Routes inside the Route?

Question

Network administration

There is something like this application structure

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')

I understand that you can insert a 404 page through, but if I insert this component a level higher. then the finance page is displayed. like a 404. Right now 404s are only displayed inside finance/... pages. The question is, how do I add a 404 page to both Route bundles? <Route path="*" component={NotFound} />

Answer 1

Add it 1 time at the very bottom.

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')