0

I have a react app that uses react-router

I want to create a route that is matched if no other route is matched, which is pretty straight forward. However I want to pass the exact route that was called to my child component. In the following code if the route was let's say /someNonMatchedRoute I want to pass this info to the Redirect component.

function App() {
  return (
    <Provider store={store}>
      <div className="App">
        <Router>
          <Navigation />
          <Switch>
            <Route path="/login">
              <Login />
            </Route>
            <Route path="/*">
              <Redirect /> // I want to pass "someNonMatchedRoute" to this component
            </Route>
          </Switch>
        </Router>
      </div>
    </Provider >
  );
}

How would I go about doing that?

maracKo
  • 1
  • 2
  • Might be a duplication of https://stackoverflow.com/questions/32128978/react-router-no-not-found-route – Lavande Jul 18 '21 at 06:10

1 Answers1

0

I figured it out. In the app.js change the routing to this:

          <Switch>
            <Route exact path="/" />
            <Route exact path="/login" component={Login} />
            <Route component={Redirect} />
          </Switch>
        </Router>

And in the redirect component you can access the path by accepting a prop

const Redirect = ({ location }) => {
    //path will give you the URL path that was queried
    const path = location.pathname.replace("/", "")
    //Your code here...
maracKo
  • 1
  • 2