Setup React Router

Need React web app to setup react-router.

If you don’t know how to setup, open my previous article about setup react app it will help you to setup.

Installation

After successfully setup react project follow below steps to setup react-router

Using npm

npm i react-router-dom --save

Using yarn

yarn add react-router-dom

Basic Example

configure your app component like below example.

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

const Home = () => (
  <h2>Home</h2>
)

const Dashboard = () => (
  <h2>Dashboard</h2>
);

const Login = () => (
  <h2>Login</h2>
);

const AppRouter = () => (
  <Router>
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/home">Home</Link>
          </li>
          <li>
            <Link to="/dashboard/">Dashboard</Link>
          </li>
          <li>
            <Link to="/login/">Login</Link>
          </li>
        </ul>
      </nav>

      <Route path="/" exact component={Home} />
      <Route path="/home" exact component={Home} />
      <Route path="/dashboard/" component={Dashboard} />
      <Route path="/login/" component={Login} />
    </div>
  </Router>
);

export default AppRouter;

for more detail and for more examples follow here

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp