react-router-tutorial | Quick lessons for getting up-to-speed with React Router | Frontend Framework library

This is not a reactjs question, but a html / css question.

Try applying this to all li elements:

The tutorial you are following is outdated. Basically, there are various types of router components (BrowserRouter, HashRouter, etc.) and they manage their history by themselves.

That is, if you are using react-router-dom. You see, react-router is now a core package which is used by both react-router-dom and react-router-native and you should install one of those (in this case, probably react-router-dom).

You can then change your code like this (assuming that the render function is coming from somewhere, presumably react-dom):

That's a pretty old tutorial. I would recommend looking at the official react router documentation instead.

The example you provided uses the browserHistory instance directly to call the history api methods. This will work if you configure react router to use browser history, but there are different history types (hash history, memory history, etc), and it's even possible to have multiple instances of browserHistory. While all the different history types support the push method, if you originally configure react router to use hash history, but within your component, you import browser history, the push call will simply not work because your router is not configured to listen to that browser history instance.

While you can use context to get the router instance, a cleaner approach is to use withRouter HOC to inject the router instance into your component as a prop. You can then call router.push and not have to worry about what kind of history you're using.

You can read more about history here

Since ${match.url}/firstService}> is in another component, you have to use this.props. to make it work

The idea here is to reduce repetition, by showing elements, which should appear on every child route. In your case it is navigation. What do you prefer -- having to add navigation on every page manually or having it added automatically to every child route?

How React is achieving it is via children props, as official React docs say:

In JSX expressions that contain both an opening tag and a closing tag, the content between those tags is passed as a special prop: props.children.

If you want to avoid this behavior, either you should avoid nesting or you can remove navigation from the App component and make it a separate component. Then you can include it in each child component one by one.

activeClassName isn't a property you can pass to . However, it is a property that you can pass to . Switch out your component with and it should "just work". You can see the . full documentation for NavLink here. The reason NavLink exists and that functionality isn't on Link is because we wanted to keep Link lean and only provide the absolute necessary functionality in order to render an anchor tag.

Your code looks correct if you used react router prior to v4, but react-router v4 has breaking changes throughout the codebase, including the method for server rendering. In v4, there is a new component specifically for server rendering - StaticRouter.

Your code should looks something like this with v4:

This issue was posted here

Changing in AppActions