React Router
npm install react-router-dom
Roseat Flamingo
npm install react-router-domnpm install react-router-dom
// APP.js Setup.........
import * as React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import "./App.css";
import Home from "./Component/Home/Home";
function App() {
return (
<div className="App">
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
// index.js setup
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
import reportWebVitals from "./reportWebVitals";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();import ReactDOM from "react-dom/client";
import {
BrowserRouter,
Routes,
Route,
} from "react-router-dom";
// import your route components too
const root = ReactDOM.createRoot(
document.getElementById("root")
);
root.render(
<BrowserRouter>
<Routes>
<Route path="/" element={<App />}>
<Route index element={<Home />} />
<Route path="teams" element={<Teams />}>
<Route path=":teamId" element={<Team />} />
<Route path="new" element={<NewTeamForm />} />
<Route index element={<LeagueStandings />} />
</Route>
</Route>
</Routes>
</BrowserRouter>
);react router
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
return (
<>
<Router>
<>
<Routes>
<>
<Route
exact
path="/"
element={
<>
<Dashboard allFaq={allFaq} />
</>
}
/>
<Route
exact
path="/login"
element={
<>
<Login />
</>
}
/>
</>
</Routes>
</>
</Router>
</>
);<Route path="/" element={<App />}>
<Route path="sales" element={<Sales />}>
<Route path="invoices" element={<Invoices />}>
<Route path=":invoice" element={<Invoice />} />
</Route>
</Route>
</Route>
import React from "react";
import { Link, Route, Switch } from "react-router-dom";
import Category from "./Category";
import Products from "./Products";
import Login from "./Login";
import PrivateRoute from "./PrivateRoute";
import "./styles.css";
const Home = () => (
<div>
<h2>Home</h2>
</div>
);
const Admin = () => (
<div>
<h2>Welcome admin!</h2>
</div>
);
export default function App() {
return (
<div>
<nav className="navbar navbar-light">
<ul className="nav navbar-nav">
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/category">Category</Link>
</li>
<li>
<Link to="/products">Products</Link>
</li>
<li>
<Link to="/admin">Admin area</Link>
</li>
</ul>
</nav>
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/category">
<Category />
</Route>
<Route path="/login">
<Login />
</Route>
<Route path="/products">
<Products />
</Route>
<PrivateRoute path="/admin" component={Admin} />
</Switch>
</div>
);
}