react router dom V6.8.1
xxxxxxxxxx
import React from "react";
import { createRoot } from "react-dom/client";
import {
createBrowserRouter,
RouterProvider,
Route,
Link,
} from "react-router-dom";
const router = createBrowserRouter([
{
path: "/",
element: (
<div>
<h1>Hello World</h1>
<Link to="/about">About Us</Link>
</div>
),
},
{
path: "/about",
element: <div>About</div>,
},
]);
createRoot(document.getElementById("root")).render(
<RouterProvider router={router} />
);
xxxxxxxxxx
//first install react router
npm install react-router-dom
//or
yarn add react-router-dom
///then write your code like in below in your App js or index.js
import {BrowserRouter , Routes , Route} from 'react-router-dom'
<BrowserRouter>
<Routes>
<Route exact path='/' element={<Home/>} />
<Route exact path='/login' element={<Login/>} />
<Route exact path='/signup' element={<Signup/>} />
</Routes>
</BrowserRouter>
//and now your down if you get error try to close your editor and open it again then you are good to go
xxxxxxxxxx
npm create vite@latest name-of-your-project -- --template react
cd <your new project directory>
npm install react-router-dom
npm install localforage match-sorter sort-by
npm run dev
xxxxxxxxxx
npm install react-router-dom
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
dalga motor 22
xxxxxxxxxx
import { BrowserRouter, Routes, Route } from "react-router-dom";
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="blogs" element={<Blogs />} />
<Route path="contact" element={<Contact />} />
<Route path="*" element={<NoPage />} />
</Route>
</Routes>
</BrowserRouter>
xxxxxxxxxx
//basic set-up for react routes
import React from 'react';
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { Register, Login, ChatApp } from "./Pages";
const app = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/register" element={ <Register/>} />
<Route path="/login" element={ <Login/>} />
<Route path="/" element={ <ChatApp/>} />
//<Routes path="~url of path~" element={ <~react component/page~/>}/>
</Routes>
</BrowserRouter>
)
}
export default app;
xxxxxxxxxx
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
// This site has 3 pages, all of which are rendered
// dynamically in the browser (not server rendered).
//
// Although the page does not ever refresh, notice how
// React Router keeps the URL up to date as you navigate
// through the site. This preserves the browser history,
// making sure things like the back button and bookmarks
// work properly.
export default function BasicExample() {
return (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/dashboard">Dashboard</Link>
</li>
</ul>
<hr />
{/*
A <Switch> looks through all its children <Route>
elements and renders the first one whose path
matches the current URL. Use a <Switch> any time
you have multiple routes, but you want only one
of them to render at a time
*/}
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/dashboard">
<Dashboard />
</Route>
</Switch>
</div>
</Router>
);
}
// You can think of these components as "pages"
// in your app.
function Home() {
return (
<div>
<h2>Home</h2>
</div>
);
}
function About() {
return (
<div>
<h2>About</h2>
</div>
);
}
function Dashboard() {
return (
<div>
<h2>Dashboard</h2>
</div>
);
}
xxxxxxxxxx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);