Question

How to render different components based on different URL path in React JS

Answer 1

// src/App.js

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

import Users from "./user/pages/Users";
import NewPost from "./posts/pages/NewPost";

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/" exact>
          <Users />
        </Route>
        <Route path="/new/post" exact>
          <NewPost />
        </Route>
        <Redirect to="/" />
      </Switch>
    </Router>
  );
};

export default App;

 

70+ SQL courses for beginners and professionals