Creating Routes in ReactJS Using React Router Dom 5
December 11, 2021
In this video, we’ll install React Router Dom 5 and create routes for our app.
Install React Router Dom 5
Install the react router dom version 5 using the command terminal.
npm install react-router-dom@5index.js
Import and wrap the root component with the BrowserRouter.
JSX
x
15
15
1
import React from 'react';2
import ReactDOM from 'react-dom';3
import { BrowserRouter as Router } from 'react-router-dom';4
import './index.css';5
import App from './App';6
7
import * as serviceWorker from './serviceWorker';8
9
ReactDOM.render(10
<Router>11
<App />12
</Router>13
, document.getElementById('root'));14
15
serviceWorker.unregister();App.js Component
In the App.js module, import Switch and Route from react-router-dom then create route paths to each component. Below is an example of a route to the /flights/:id url.
JSX
xxxxxxxxxx1
25
25
1
import React from 'react';2
import { Switch, Route} from 'react-router-dom';3
import { Nav, Footer, FlighData, FlightList } from "./components";4
import './App.css';5
6
class App extends React.Component {7
constructor(props) {8
super(props);9
this.state = { flightData: FlighData };10
}11
12
render() {13
return (14
<div className="App">15
<Nav />16
<Routes>17
<Route path="/flights/:id"> <FlightList flightData={this.state.flightData} /> </Route>18
</Routes>19
<Footer />20
</div>21
);22
}23
}24
export default App;25
People Also View
Two Ways to Create and Use Uncontrolled Components in ReactJS
Overview In an Uncontrolled Component, the "single source of truth" (data) is maintained in the actual DOM. They are like traditional HTML form inputs. An input form element whose value is not controlled by React in this way is called an “uncontrolled component”. In an Uncontrolled Component, form data…
