Router dom react v6

React router v6

import React from 'react';
import { BrowserRouter as Router , Route , Routes } from "react-router-dom";
import Landing from "./experimentalComponents/Landing"
import First from "./experimentalComponents/First"
import Second from "./experimentalComponents/First"
import AuthContext from "./contexts/authContext";


const Experiment = () => {
    return (
        <AuthContext> 
            
            <Router> 
                <Routes> 
                    <Route path="/" exact element={<Landing/>}/> 
                    <Route path="/first" exact element={<First/>}/> 
                    <Route path="/second" exact element={<Second/>}/> 
                </Routes>
            </Router>

        </AuthContext>
    )
}

export default Experiment;

React router dom v6

import {BrowserRouter,Routes,Route,Navigate,Outlet} from "react-router-dom";
<BrowserRouter>
    <Routes>
        <Route path="/" element={<Navigate to="/main" />} />
        <Route path="/home/*" element={<div><Outlet/></div>}>
            <Route path="page1" element={<h1>home page 1</h1>} />
            <Route path="page2" element={<h1>home page 2</h1>} />
        </Route>
        <Route path="/notification" element={<h1>notification page</h1>} />
        <Route path="/notification/:id" element={<h1>notification details pages</h1>} />
        <Route path="/login" element={<h1> login page </h1>} />
    </Routes>
</BrowserRouter>

Router dom react v6

React router dom v6

Similar codes

0 vote115 views1 answer
What is react mounting
Javascript React
0 vote101 views1 answer
.env not working on react
Javascript React
0 vote53 views1 answer
Open xcode shorthand react native
Javascript React
16 votes127 views2 answers
Where to put background images in react app
Javascript React
65 votes106 views6 answers
React routing
Javascript React
0 vote98 views1 answer
Change env location react
Javascript React
0 vote96 views1 answer
Error while updating linecap of a view polyline react-native-maps
Javascript React
0 vote109 views2 answers
React-native local image not showing ios
Javascript React
0 vote104 views1 answer
Reactjs ES6 class event listeners in jsx
Javascript React
2 votes102 views2 answers
React not recognizing lorem
Javascript React