Navigation with react-router-dom

A example of navigation with react-router-dom

Here gives you much better explanation.

React Router: Declarative Routing for React

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 :

• https://reacttraining.com/react-router/web/guides/quick-start
• https://www.npmjs.com/package/react-router-dom

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.