Path not being found in react-router-dom

Question

Trying to set up React Router V4 and The path is always returning 404

I have a basic set up

index.jsx 

    import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './components/App';


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

App.jsx 

    import { BrowserRouter as Router, Route} from 'react-router-dom';
    import Content from './Content';
    import Contact from './Contact';

    render () {

        return (
          <div>
              <Router>
                <div>
                <Route path='/' component={Content} />
                <Route path='/contact' component={Contact} />
                </div>
              </Router>
            </div>
            )
        }

both components are basic react components 

Content.jsx / Contact is the same just different class name of Contact

    import "../css/content.css";

    import React from 'react';

    export default class Content extends React.Component {
        render(){
            return (
                <div id="content">
                    <div className="inner">
                        <div className="bgWrap">
                            <h2>Welcome</h2>
                            <p>Hey</p>

                        </div>
                    </div>
                </div>
            );
        }
    }

the Content component works on http://localhost:8080 but I get a 404 once I try /contact, the contact

Many thanks in advance

does your server return the the client code when browsing on the path `/contact`? — Davin Tryon, Jul 12 '17 at 08:43
I do not think so, looking at the network i just get the response of ` Error
Cannot GET /contact
` — Matthew Barnden, Jul 12 '17 at 09:08
You need to arrange the server so that all "client handled" routes return the same thing. — Davin Tryon, Jul 12 '17 at 09:09
Ok many thanks I shall look into that, do yo have any links handy that would point me in the right direction, Is this something i need to do in the webpack config? — Matthew Barnden, Jul 12 '17 at 09:11
You was correct, thanks very much for your help using this link I was able to set up webpack-dev-server correctly to fallback to index.html for 404s https://stackoverflow.com/questions/31945763/how-to-tell-webpack-dev-server-to-serve-index-html-for-any-route, may need something else for production but i understand the issue — Matthew Barnden, Jul 12 '17 at 09:36

score 0 · Answer 1 · answered Jul 12 '17 at 08:46

0

Try :

App.jsx 

import {Switch as RouterSwitch, Route} from 'react-router-dom';
import Content from './Content';
import Contact from './Contact';

const App=()=> (
          <RouterSwitch>        
            <Route path='/' component={Content} />
            <Route path='/contact' component={Contact} />         
          </RouterSwitch>
        );

export default App;

Hope it is helpful for you :)

answered Jul 12 '17 at 08:46

Voi Mập

779
3
7
22

Thanks for your response, My App.jsx also need state which I didn't show in the example( I was trying to provide the minimum code possible :) so App.js also extends from React.Component and has a contructor with super(props) etc, I did try using the switch though but it didn't work. – Matthew Barnden Jul 12 '17 at 09:01
:(. Sorry for not helping you. I 'm making too a App use Route.And my App worked with this code. Then wait to another Solution ^^ – Voi Mập Jul 12 '17 at 09:17

score 0 · Accepted Answer · answered Jul 12 '17 at 09:42

thanks to Davin Tryon in the comments, to fix my issue I needed to configure webpack-dev-server to return all client routes to in my case index.html, I shall then use he router to handle my 404's. to configure webpack I followed this How to tell webpack dev server to serve index.html for any route

Path not being found in react-router-dom

2 Answers2