JavaScriptJavaScript FrameworksReact

Creating Routes in ReactJS Using React Router Dom 5

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@5


Import and wrap the root component with the BrowserRouter.

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import './index.css';
import App from './App';

import * as serviceWorker from './serviceWorker';

        <App />
    , document.getElementById('root'));


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.

import React from 'react';
import { Switch, Route} from 'react-router-dom';
import { Nav, Footer, FlighData, FlightList } from "./components";
import './App.css';

class App extends React.Component {
  constructor(props) {
    this.state = { flightData: FlighData };

  render() {
    return (
      <div className="App">
        <Nav />
          <Route path="/flights/:id"> <FlightList flightData={this.state.flightData} /> </Route>
        <Footer />
export default App;
Verified by MonsterInsights