Migrate 'react-router' into 'react-router-dom' (v4)

Question

I am learning React Routing and I am watching this tutorial:

https://www.youtube.com/watch?v=1iAG6h9ff5s

Its 2016 tutorial so I suppose something changed because 'react-router' not working anymore and I am supposed to use 'react-router-dom'.

I found that I must uninstall 'history' and 'react-router' and use 'react-router-dom' instead, but It not working as expected when I change it.

How to edit this to make it working with 'react-router-dom'?

import React from "react";
import ReactDOM from "react-dom";
import {Router, Route, IndexRoute, hashHistory} from "react-router";

import Layout from "./pages/Layout";
import Archives from "./pages/Archives";
import Featured from "./pages/Featured";
import Settings from "./pages/Settings";

const app = document.getElementById('app');
ReactDOM.render(
    <Router history={hashHistory}>
        <Route path="/" component={Layout}>
            <IndexRoute component={Featured}></IndexRoute>
            <Route path="archives" component={Archives}></Route>
            <Route path="settings" component={Settings}></Route>
        </Route>
    </Router>,
    app);

My edit:

import React from "react";
import ReactDOM from "react-dom";
import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";

import Layout from "./pages/Layout";
import Archives from "./pages/Archives";
import Featured from "./pages/Featured";
import Settings from "./pages/Settings";

const app = document.getElementById('app');

ReactDOM.render(
    <Router>
        <Route path="/" component={Layout}>
            <Route path="/featured" component={Featured}/>
            <Route path="/archives" component={Archives}/>
            <Route path="/settings" component={Settings}/>
        </Route>
    </Router>,
    app);

Also pushState not working... Layout.js

import React from "react";
import {Link} from "react-router-dom";

export default class Layout extends React.Component {
    navigate() {
        this.props.history.pushState(null, "/");
    }

    render() {
        return (
            <div>
                {this.props.children}
                <h1>Welcome</h1>
                <button onClick={this.navigate.bind(this)}>Featured</button>
            </div>
        );
    }
}

When I click to Link url change, but content is not loaded... Also when I access url I get "Cannot GET" error

You can look at [one of the examples in the documentation](https://reacttraining.com/react-router/web/example/basic). — Tholle, Aug 11 '18 at 22:13
I watched this, but I have problems with Layout and his childs... Its not working... — Baterka, Aug 11 '18 at 22:14
Sorry, I can't see the `Link` again. Just let me understand your logic. What will be in your `Layout` component? — devserkan, Aug 11 '18 at 22:30
I just need to change code from tutorial to work in route v4. Or everyone still using old router??? — Baterka, Aug 11 '18 at 22:32
Of course not, you can easily convert your code. But I just want to understand how your Layout look like. By the way, I never used the old version, so I can easily understand the new one but the old one is a little bit weird for me :) I will try to provide an answer, maybe we can continue from there. — devserkan, Aug 11 '18 at 22:35
I think its better to watch part of video where he showing it, but if u want I can try to explain it.. I need layout with menu links (one by onclick event) and dynamically changable pages inside layout — Baterka, Aug 11 '18 at 22:38

devserkan · Accepted Answer · 2018-08-11T23:08:33.090

After watching the video, you probably want something like this. At first this would not be so easy to understand but after seeing a few of them you digest it. First you render your Layout with one Route. Then in this top route, you use other Routes to setup your components.

We usually use exact props for a top root like /. If you don't setup your app like that, for example all your routes is in your top Router config, then to use a route something like /featured we must have exact prop. If we don't use it Router always hit / path and we always see the top level component.

But, in your situation, you want other components to be routed in your top level component. So, we drop exact prop here.

Also you can use push to change history.

Update

After think about the navigation button named "Featured", I think you want the Featured component rendered as default one here. When hit the button again you will come back to Featured one. I've changed the code according to that. In this version, we add a / route in the Layout and point it to Featured. So, when we come here it is rendered. But, we use exact prop here since we also want routes like "/featured", "/archives" and "/settings".

export default class Layout extends React.Component {
  navigate = () => this.props.history.push("/");

  render() {
    return (
      <div>
        <h1>Welcome</h1>
        <Link to="/featured">Featured</Link>
        <Link to="/archives">Archives</Link>
        <Link to="/settings">Settings</Link>
        <br />
        <button onClick={this.navigate}>Featured</button>
        <Route exact path="/" component={Featured} />
        <Route path="/featured" component={Featured} />
        <Route path="/archives" component={Archives} />
        <Route path="/settings" component={Settings} />
        <div>
        Some other info.
        </div>
      </div>
    );
  }
}

const app = document.getElementById('root');

ReactDOM.render(
  <Router>
    <Switch>
      <Route path="/" component={Layout} />
    </Switch>
  </Router>,
  app);

Thanks! It works as expected. So main difference between old v3 and new v4 is that u must place your Routes inside Layout instead placing them as childs of parent Route. Right? — Baterka, Aug 11 '18 at 23:12
You are welcome. Probably yes, but I'm not sure since I haven't use the old version at all. I'm this new :) But, as you explained we don't use any children and IndexRoute at all. We place our Routes in the layout and do the routing again there. — devserkan, Aug 11 '18 at 23:14

Migrate 'react-router' into 'react-router-dom' (v4)

1 Answers1