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
– Davin Tryon, Commented Jul 12, 2017 at 8:43
I do not think so, looking at the network i just get the response of <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Error</title> </head> <body> <pre>Cannot GET /contact</pre> </body> </html> — Matthew Barnden
– Matthew Barnden, Commented Jul 12, 2017 at 9:08
You need to arrange the server so that all "client handled" routes return the same thing. — Davin Tryon
– Davin Tryon, Commented Jul 12, 2017 at 9: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
– Matthew Barnden, Commented Jul 12, 2017 at 9: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 stackoverflow.com/questions/31945763/…, may need something else for production but i understand the issue — Matthew Barnden
– Matthew Barnden, Commented Jul 12, 2017 at 9:36

Voi Mập · Accepted Answer · 2017-07-12 08:46:54Z

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, 2017 at 8:46

Voi Mập

8193 gold badges9 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Matthew Barnden Over a year ago

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.

Voi Mập Over a year ago

:(. 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 ^^

Matthew Barnden · Accepted Answer · 2017-07-12 09:42:17Z

0

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

answered Jul 12, 2017 at 9:42

Matthew Barnden

5381 gold badge6 silver badges16 bronze badges

Collectives™ on Stack Overflow

Path not being found in react-router-dom

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related