React Router Not Showing 'Not Found' Page

Question

I can't seem to get my NotFound component to render. Whenever I type in some random characters in the url (ex: 'localhost:3000/asdfasdfasdfasdf'), the browser actually directs to my Topics component, with no content.

Here is how I have the routes set up:

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

render(){
  return (
    <div className="App">
      <Router>
        <NavBar />
        <Switch>
         <Route exact path='/' component={HomepageLayout} />  
         <Route exact path='/:topic' component={Topic} />  
         <Route path='*' component={NotFound} />
        </Switch>
      </Router>
    </div>
  );
 }

export default App;

I've also tried not specifying a path, as some have advised, but this didn't work either:

<Route component={NotFound} />

Any ideas?

Does this answer your question? [React-Router: No Not Found Route?](https://stackoverflow.com/questions/32128978/react-router-no-not-found-route) — Yatrix, Sep 30 '20 at 14:21
i would modify your /:topic route to /topic/:topic then it should work as expected — Rob Terrell, Sep 30 '20 at 14:31

Veno · Accepted Answer · 2020-09-30T14:59:29.457

3

This will not work as you are mentioning in the second route as any value can hold as /:topic, this route will get displayed when you add like this. Because, any segment that starts with a colon will be treated as a parameter. So the * route will not get displayed at any case!

edited Sep 30 '20 at 14:59

answered Sep 30 '20 at 14:22

Veno

433
2
14

React Router Not Showing 'Not Found' Page

1 Answers1