81

This is common purpose, directing unmatch request to notfound page.

making this with react-router v4 looks like previous versions and I expect this sample works below. Links work fine but I expect NotFound component called only unknown url requested; but its always there.

import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom'


class Layout extends Component {
  render() {
    return (
    <Router>
      <div className="App">
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/user">User</Link></li>
        </ul>
        <Route exact path="/" component={Home}/>
        <Route path="/user" component={User}/>
        <Route path="*" component={Notfound}/>
      </div>
  </Router>
    );
  }
}

enter image description here enter image description here

its since path="*" represent all request and notfound component always there but how can I say hide this component for valid url path?

6 Answers 6

174

React Router's No Match documentation covers this. You need to import the <Switch> component, then you can remove the path attribute altogether.

A <Switch> renders the first child <Route> that matches. A <Route> with no path always matches

This is the example that uses:

<Router>
  <div>
    <Switch>
      <Route path="/" exact component={Home}/>
      <Redirect from="/old-match" to="/will-match"/>
      <Route path="/will-match" component={WillMatch}/>
      <Route component={NoMatch}/>
    </Switch>
  </div>
</Router>

So in your case, you'd simply drop the path="*" and introduce the <Switch>:

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/user" component={User}/>
  <Route component={Notfound} />
</Switch>

Remember to include Switch to your import statement at the top.

2
  • Works like charm, thx! iǘe just found an awesome and useful post just for append more about react-routes v4 - medium.com/@pshrmn/…
    – felippeDev
    Aug 20, 2017 at 2:53
  • 1
    But then how to I choose the location path for my 404 ? Jan 6, 2019 at 9:36
6

this is my solution with two components.

const NotFound = () => <div>Not found</div>

const NotFoundRedirect = () => <Redirect to='/not-found' />

//root component
<Switch>
 <Route path='/users' component={UsersPages} />
 <Route path='/not-found' component={NotFound} />
 <Route component={NotFoundRedirect} />
</Switch>

//UsersPages component
<Switch>
 <Route path='/home' component={HomePage} />
 <Route path='/profile' component={ProfilePage} />
 <Route component={NotFoundRedirect} />
</Switch>

That work perfect for me. Thanks.

2
  • 1
    How do you rewrite the 404 location path Jan 6, 2019 at 9:37
  • 1
    Is simple wherever you have a switch at the end put a <Route component={NotFoundRedirect} /> and allways you go to have a 404 redirect. Thank's Jun 24, 2019 at 20:37
3

This method works perfectly, it allows to make a redirect if the url does not exist or if it is false

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/sorties-scolaires" component={SortiesScolaires} />
        <Route path="/voyages-entreprise" component={VoyagesEntreprise} />
        <Route path="*">
          <Redirect to="/" />
        </Route>
      </Switch>
    </Router>
  );
}
2

Although the accept solution does provide the answer, but it wouldn't work when you have nested Routes

For instance, if the Home component has nested Routes like /home, /dashboard and if the visited url is /db, it would show a NotFound component only within the Route section, but not the page as a whole.

To avoid this, you can go along with a very simple tweak of using a component and a Provider

const NoMatch = (props) => (
    <Redirect to={{state: {noMatch: true}}} />
)

const ProviderHOC = (NotFoundRoute) => {
    const RouteProvider = (props) => {
        if(props.location && props.location.state && props.location.noMatch) {
           return  <NotFoundRoute {...props} />
        }
        return props.children;
    }
    return withRouter(RouteProvider)

}

export default ProviderHOC;

And then you can use it like

const RouteManager  = ProviderHOC(NotFoundComponent);

<Router>
  <RouteManager>
    <Switch>
      <Route path="/" exact component={Home}/>
      <Redirect from="/old-match" to="/will-match"/>
      <Route path="/will-match" component={WillMatch}/>
      <NoMatch />
    </Switch>
  </RouteManager>
</Router>

and within Home component

render() {
    return (
         <Switch>
               <Route path="/home" component={NewHome} />
               <Route path="/dashboard" component={Dashboard} />
               <NoMatch />
         </Switch>
    )
}
0

React Router v6

I know it was a question for Router v4, but since there is v6 out, to redirect and navigate to one of our chosen routes, we can use <Navigate> component from React Router.

Example:

<Router>
  <Routes>
    <Route path="users" element={<Users />} />
    <Route path="posts" element={<Posts />} />
  </Routes>
</Router>

Now we can declare below our route configuration the case for empty routes, like this:

<Router>
  <Routes>
    <Route path="users" element={<Users />} />
    <Route path="posts" element={<Posts />} />
    <Route path="" element={<Navigate to="/users" />} />
  </Routes>
</Router>

Live Demo: Redirect Default or 404 Routes with React Router

-2

It does not work for me, particularly one is using this config

So, I have to check the path in the render function of Homepage component. Something like this:

render(){
const {match, location, history} = this.props;
if (location.pathname === '/'){
return (<div>Home</div>)
}else{
return null
}
}

1
  • 1
    OP is asking about a route that is not found or possible a malformed url, not the root url. Aug 21, 2017 at 23:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.