Clash Royale CLAN TAG#URR8PPP

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

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

Link

Layout

1 Answer
1

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.

Layout

Route

Route

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.

exact

/

Router

/featured

exact

Router

/

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

exact

Also you can use push to change history.

push

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".

Featured

Featured

/

Layout

Featured

exact

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);


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.