React Router example

React-Router.md

Install

npm install react-router-dom

Import

Into App.js:

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

step1.md

Setting up Router

In App.js wrap <Router></Router> around the component routes.

Example:

<Router>    
  
  <div className="App">
  
  <Route path="/" exact component={Home} />
  <Route path="/about" component={About} />
  
  </div>
  
</Router>

step2.md

Usage

Import:

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

Wrap <Link></Link> around something that should be a link.

Example:

<Link style={navStyle} to="/">
 
 <li>Home</li>
        
</Link>

z.md

Notes

• <Switch> or exact can be used to render out the components 1 at a time.

  • The only thing with switch is that you have to order the components a certain way, i.e. if path "/" is first...the other components will no longer render; as soon as it finds that route with the specific path it stops looking ...so the other components, you will never see if you try to go to the path; it will stop at "/". However, 'exact' is the easiest way since you don't have to re-order anything and can just add 'exact' on the specific component with path "/".

React Router allows you to create paths that render the components. When a user clicks a link, data doesn't have to get grabbed from a server, instead it simply renders the component to the screen - whatever path it's set to. (no refreshing or anything)

Repo:
https://github.com/jasheloper/dynamic-routing

@jashloper the link to the repo does not work could you please publish it again.
Ps : thanks for your explication