javascript - React router nested routes - How to redirect when no route is matching - Stack Overflow

admin管理员组

文章数量:1399234

I'm building a web app with three main parts: The actual website, an admin part and a user part. For each part, I want a different layout wrapper.

This is my code right now:

Website wrapper

const Website = () => (
  <React.Fragment>
    <NavigationBar />
    <main>
      <div className="container">
        <Switch>
          <Route exact path='/' ponent={Home}/>
          <Route exact path='/login' ponent={Login}/>
        </Switch>
      </div>
    </main>
    <FooterBar />
  </React.Fragment>
);

User wrapper

const User = () => (
  <React.Fragment>
    <UserSideBar />
    <main>
      <div className="container">
        <Switch>
          <Route exact path='/u/dashboard' ponent={UDashboard}/>
          <Route exact path='/u/account' ponent={UAccount}/>
        </Switch>
      </div>
    </main>
  </React.Fragment>
);

Admin wrapper

const Admin = () => (
  <React.Fragment>
    <main>
    <div className="container">
      <Switch>
        <Route exact path='/a/dashboard' ponent={ADashboard}/>
        <Route exact path='/a/payments' ponent={APayments}/>
        <Route exact path='/a/account' ponent={AAccount}/>
      </Switch>
    </div>
    </main>
  </React.Fragment>
);

Router

const Router = () => (
    <BrowserRouter>
      <Switch>
        <Route path="/u" ponent={User} />
        <Route path="/a" ponent={Admin} />
        <Route path="/" ponent={Website} />

        <Redirect from="*" to="/" />
      </Switch>
    </BrowserRouter>
);

It's all working fine but if an url is not matching any of the routes, it's not redirecting to '/'. How can I achieve this?

I'm building a web app with three main parts: The actual website, an admin part and a user part. For each part, I want a different layout wrapper.

This is my code right now:

Website wrapper

const Website = () => (
  <React.Fragment>
    <NavigationBar />
    <main>
      <div className="container">
        <Switch>
          <Route exact path='/' ponent={Home}/>
          <Route exact path='/login' ponent={Login}/>
        </Switch>
      </div>
    </main>
    <FooterBar />
  </React.Fragment>
);

User wrapper

const User = () => (
  <React.Fragment>
    <UserSideBar />
    <main>
      <div className="container">
        <Switch>
          <Route exact path='/u/dashboard' ponent={UDashboard}/>
          <Route exact path='/u/account' ponent={UAccount}/>
        </Switch>
      </div>
    </main>
  </React.Fragment>
);

Admin wrapper

const Admin = () => (
  <React.Fragment>
    <main>
    <div className="container">
      <Switch>
        <Route exact path='/a/dashboard' ponent={ADashboard}/>
        <Route exact path='/a/payments' ponent={APayments}/>
        <Route exact path='/a/account' ponent={AAccount}/>
      </Switch>
    </div>
    </main>
  </React.Fragment>
);

Router

const Router = () => (
    <BrowserRouter>
      <Switch>
        <Route path="/u" ponent={User} />
        <Route path="/a" ponent={Admin} />
        <Route path="/" ponent={Website} />

        <Redirect from="*" to="/" />
      </Switch>
    </BrowserRouter>
);

It's all working fine but if an url is not matching any of the routes, it's not redirecting to '/'. How can I achieve this?

• javascript
• reactjs
• react-router

Share Improve this question Follow asked Aug 16, 2018 at 23:09 ThoreThore 1,86822 gold badges3131 silver badges6565 bronze badges 1

• You can add the Redirect logic in your Website ponent but this time /u/foo or /a/bar does not work. I can't find a solution this is why I am going to follow this question :) – devserkan Commented Aug 16, 2018 at 23:48

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You could just make a reusable ponent NoMatch and included at the bottom of your Switch.
For example:

<Switch>
    <Route exact path='/a/dashboard' ponent={ADashboard}/>
    <Route exact path='/a/payments' ponent={APayments}/>
    <Route exact path='/a/account' ponent={AAccount}/>
    <Route ponent={Notfound} />
</Switch>

Make sure to put it at the very end So, if no other route was matched, that one would be displayed.

---

Or you can make a simple custom function which you can reuse depending on your needs:

You could do this if the undefined path is not clear:

const createRedirect = to => () => <Redirect to={to} />
// ...
<Route path="/*" ponent={createRedirect('/foo')} />

---

To implement a redirect fallback in a switch, you need to do:

<Switch>
  <Route path="/foo" ponent={Bar}/>
  <Route path="/bar" ponent={Baz}/>
  <Route render={() => <Redirect to="/foo"/>}/>
</Switch>

---

Or you can take the longer approach and make it programmatically redirect. Here is a reference of a reusable ponent, or at least reusable logic that you could implement to your needs: Reference

本文标签： javascriptReact router nested routesHow to redirect when no route is matchingStack Overflow