React-router : The page you're looking for could not be found

React-router : The page you're looking for could not be found
0

#1

I’m new to react-router ( I’m using browser-router v4). So routing in my app works fine, but when I reload the page like /services, … , (anything except ‘/’ ) it returns me 404 error.
How should I fix that?
Here’s the router code:

import React from 'react'
import { render } from 'react-dom'
import Route from 'react-router-dom/Route'
import BrowserRouter from 'react-router-dom/BrowserRouter'
import Switch from 'react-router-dom/Switch'
import Landing from './Landing'
import NoMatch from './NoMatch'
import Services from './Services'
import Contacts from './Contacts.js'

import 'bootstrap/dist/css/bootstrap.css'

const App = React.createClass({
  render () {
    return (
      <BrowserRouter>
        <div className='app'>
          <Switch>
            <Route exact path='/' component={Landing} />
            <Route path='/services' component={Services} />
            <Route path='/contacts' component={Contacts} />
            <Route component={NoMatch} />
          </Switch>
        </div>
      </BrowserRouter>
    )
  }
})

render(<App />, document.getElementById('app'))

#2

If some one would be looking for an answer: here’s a link:
React-router urls don’t work when refreshing or writting manually


#3

The issue is not with React Router but how you are rendering the application.
I’m assuming you are using Express?
You need to make sure that you have an Express Route that catches all routes.

`` get("*", showIndex);

This will redirect all requests (/services) to the index.html page and therefore fire the app. React Router will then kick in and show the correct page.
Is this happening in development/Productions?

For more details about Switch, please check out this short video.