Rendering noMatch in React Router v4 doesn't work?

Question

This is my code:

class noMatch extends React.Component {
  render() {
    return 'Not Found'
  }
}
ReactDOM.render(
   <BrowserRouter>
      <Switch>
        <Route exact path='/(index.html)?' component={App}/>
        <Route component={noMatch}/>
      </Switch>
    </BrowserRouter>,
  mountNode
);

The app runs in localhost:3000/ and localhost:3000/index.html as expected. but when there's no match, my no Match doesnt render? I am following the noMatch tutorial from the docs here. Help?

Possible duplicate of [React - Adding component after AJAX to view](https://stackoverflow.com/questions/41216654/react-adding-component-after-ajax-to-view) — Shubham Khatri, Jun 27 '17 at 04:08
check the Duplicate question, the answer on that will help you understand your mistake. Let me know if you still cannot solve the problem — Shubham Khatri, Jun 27 '17 at 04:10
just the 404 not found. but I am expecting the NoMatch component to render — gpbaculio, Jun 27 '17 at 04:21
are you serving your index.html through nodeJS. If yes then how — Shubham Khatri, Jun 27 '17 at 04:29
I did new WebpackDevServer(compiler, { contentBase: '/public/index.html', ... } so I can render on localhost:3000/ — gpbaculio, Jun 27 '17 at 04:46

score 0 · Answer 1 · answered Jun 30 '17 at 07:21

Your router code looks find. If you are just returning string in your noMatch component, you should return valid React element such as this:

class noMatch extends React.Component {
    render() {
        return (
            <div>Not Found</div>
        );
    }
}

Rendering noMatch in React Router v4 doesn't work?

1 Answers1