Navigation with react-router-dom

Michael S
1 min readJan 16, 2019

--

A example of navigation with react-router-dom

Here gives you much better explanation.

  1. Intall react-router-dom
yarn add react-router-dom

2. Import BrowserRouter, Route, Link components from react-router-dom

import { BrowserRouter, Route, Link } from 'react-router-dom'
  • BrowserRouter : A <Router> that uses the HTML5 history API (pushState, replaceState and the popstate event) to keep your UI in sync with the URL.
  • Route : The Route component is perhaps the most important component in React Router to understand and learn to use well. Its most basic responsibility is to render some UI when a location matches the route’s path.
<Route path="/pageone" component={PageOne} />
  • Link : Provides declarative, accessible navigation around your application.

3. Wrap Route tag with BrowserRouter

const App = () => {
return (
<BrowserRouter>
<div>
<Route path="/" component={Home} />
<Route path="/pageone" component={PageOne} />
<Route path="/pagetwo" component={PageTwo} /></div>
</BrowserRouter>
)
};

More :

  • Difference between react-router-dom and react-router.
  • The reason we can’t use html <a> tag and href with react-router-dom.

Reference :

I am blogging what I’ve learned to find later here for myself. If you happened to read this shit and there is wrong information, it would be appreciated to add a comment below.

--

--