CODEWITHSUNDEEP
reactjsreact-routerreact-router-v4react-router-dom
theJuls
theJuls

Reputation: 7450

Changing a component via React-router v4

I made a similar question a month or so ago which seemed to solve all my problems here, however I guess the react-router version changed and now that has all gone to the trash? Because now none of that works and the code had some pretty big changes according to my research.

I just want to do some simple routing for a simple webapp, using the same example from my previous thread, I currently have this:

import {
  BrowserRouter as Router,
  Route, IndexRoute, Switch,
  Link
} from 'react-router-dom';
class Page1 extends Component{
  render(){
    return (<div>Page1</div>);
  }
}

class Page2 extends Component{
  render(){
    return (<div>Page222</div>);
  }
}

class Home extends Component {
    render(){
      return(<h1>I AM HOME</h1>);
    }
}
ReactDOM.render(
         <Router>
             <Switch>
             <Route exact path="/" component={Home}/>
            <Route exact path="/page1" component={Page1}/>
            <Route exact path="/page2" component={Page2}/>
             </Switch>
    </Router>,
    document.getElementById('root')
);

Unfortunately, even like this, I still can't navigate in between the different components and keep getting the message

Cannot GET /page1

I've also noticed that it seems that this.props.children is not used anymore or at least it does not work like it used to.

Anyway, all I want is to simply be able to navigate between the pages and appropriately route them. What am I doing wrong here?

Edit: I should also probably mention that I have gone through React Router's documentation and have attempted to follow it as seen here, unfortunately the routes still do not work.

Upvotes: 1

Views: 561

Answers (2)

Farhaan Bukhsh
Farhaan Bukhsh

Reputation: 178

There are a few things to take into consideration here whenever you say path=/something the browser actually try to redirect to the path and it fails, this happens because the server whichever server you are using webpack-dev-server or express serverdoesn't get the file. React is basically use to make SPA single page application hence at the end of the day you are serving only the first page which index.html. Hence you have to tell the server what to serve when you hit a url. Most cases you have to serve index.html or which ever page that is responsible for your application again.

How to solve this:

If you are using webpack-dev-server and you are running it from the same directory as your index.html you can go ahead and pass a --historyApiFallback flag to webpack so something like this:

$ webpack-dev-server --host 0.0.0.0 --historyApiFallback

and you will see which location it will fallback.

More cleaner way of doing it is putting devServer config key in your webpack.config.js. Which will be something like this:

 devServer: {
    historyApiFallback: {
      index: 'templates/index.html'
    },
  }

Here the index.html is being served from templates directory you can specify the path for your page.

After putting this in your webpack.config.js, you can run the server and your component will hopefully render. Hope this helps you.

Upvotes: 1

Brigand
Brigand

Reputation: 86220

That looks like an express.js error, not a client side one. Make sure your server is serving index.html for all urls that don't match anything else.

Upvotes: 1

Related Questions