xxxxxxxxxx
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));
import Shop from './routes/shop/shop';
const App = () => (
<Router>
<Routes>
<Route path='/' element={<Navigation />}>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path='shop/*' element={<Shop />} />
</Route>
</Routes>
</Router>
);
#in navigation.js
const Navigation = () => {
return (
<>
<Whatever />
<Outlet /> #important
</>
);
};
#in shop.js
import { Routes, Route } from 'react-router-dom';
const Shop = () => {
return (
<Routes>
<Route index element={<CategoriesPreview />} />
<Route path=':category' element={<Category />} />
</Routes>
);
};
#in category.js
import { useParams } from 'react-router-dom';
const Category = () => {
const { category } = useParams(); #destructure the param
.
}
xxxxxxxxxx
//First install react router
npm install react-router-dom
//Import it from your react index.js file
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
//Rap your app with BrowserRouter
<BrowserRouter>
<App />
</BrowserRouter>
//Define you Routes in your app and import it on the top
<Routes>
<Route path="/" element={<Home />} />
<Route path="/create" element={<Create />} />
<Route path="/blogs/:id" element={<BlogDetails />} />
<Route path="*" element={<NotFound />} />
</Routes>
//Now you are all set. You can use this with
<Link to="/create" element={Create}/>
xxxxxxxxxx
// [1] terminal
npm install react-router-dom
// [2] index.js
import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider, createBrowserRouter } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";
import NotFound from "./pages/NotFound";
// you can also create this router constant in another file and import it here
const Router = createBrowserRouter([
{
path: "/",
element: <Home />,
errorElement: <NotFound />,
},
{
path: "/about",
element: <About />,
},
{
path: "/contact",
element: <Contact />,
}
]);
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<RouterProvider router={Router} />
</React.StrictMode>
);
xxxxxxxxxx
//React Router 6
import Home from './Home';
import Navbar from './Navbar';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Create from './Create';
import BlogDetails from './BlogDetails';
import NotFound from './NotFound';
function App() {
return (
<Router>
<div className="App">
<Navbar />
<div className="content">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/create" element={<Create />} />
<Route path="/blogs/:id" element={<BlogDetails />} />
<Route path="*" element={<NotFound />} />
</Routes>
</div>
</div>
</Router>
);
}
export default App;
xxxxxxxxxx
// 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();
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import { Route, Link, BrowserRouter as Router } from 'react-router-dom'
import './index.css';
import App from './App';
import About from './about'
import Contact from './contact'
const routing = (
<Router>
<div>
<h1>React Router Example</h1>
<Route exact path="/" component={App} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</Router>
)
ReactDOM.render(routing, document.getElementById('root'));
xxxxxxxxxx
import "./App.css";
import SignIn from "./SignIn";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import PrimarySearchAppBar from "./Header";
import SignUp from "./SignUp";
function App() {
return (
<Router>
<PrimarySearchAppBar />
<Routes>
{["/", "/home"].map((path) => (
<Route exact path={path} element={<Home />} />
))}
<Route path="/signin" exact element={<SignIn />} />
<Route path="/signup" exact element={<SignUp />} />
<Route exact path="*" element={<ComingSoon />} />
</Routes>
</Router>
);
}
export default App;
To use React Router in your React application, you first need to install it as a dependency using npm:
xxxxxxxxxx
npm install react-router-dom
Once you have installed React Router, you can start using it in your application. Here's an example of how to define routes in your application using React Router:
import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
function App() {
return (
<Router>
<div>
<Switch>
<Route exact path="/">
<HomePage />
</Route>
<Route path="/about">
<AboutPage />
</Route>
<Route path="/contact">
<ContactPage />
</Route>
</Switch>
</div>
</Router>
);
}
Inside each Route component, you can define a component that will be rendered when the route is matched. For example, you might define a HomePage component like this:
function HomePage() {
return <h1>Welcome to the home page!</h1>;
}
To navigate between routes in your application, you can use the Link component from React Router:
import { Link } from "react-router-dom";
function Navbar() {
return (
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
);
}
//Install react router
xxxxxxxxxx
npm create vite@latest name-of-your-project -- --template react
# follow prompts
cd <your new project directory>
npm install react-router-dom localforage match-sorter sort-by
npm run dev
xxxxxxxxxx
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>
</>
);