استاد من با توجه به این در ورژن 6 روتر دام هم useHistory و هم Switch و Redirect حذف شده من مثال بالا رو به روش زیر تغییر دادم و کار میکنه ولی واقعا نمیدونم روش درستی هست یا نه
//App.js import { Link, Route, Routes } from "react-router-dom"; import { useAuth } from "./context/auth-user"; import HomePage from "./components/HomePage"; import Blog from "./components/Blog"; import Panel from "./components/Panel"; import Login from "./components/Login"; import PrivateRoute from "./components/PrivateRoute"; export default function App() { const auth = useAuth(); return ( <> <ul> <li> <Link to={"/"}>Home pageLink> li> <li> <Link to={"/blog"}>BlogLink> li> <li> <Link to={"/panel"}>PanelLink> li> ul> <Routes> <Route exact path={"/"} element={<HomePage />}>Route> <Route path={"/blog"} element={<Blog />}>Route> <Route path='/panel' element={<PrivateRoute />}> <Route element={<Panel/>}/> Route> <Route path='/login' element={<Login />}>Route> Routes> > ); }
//PrivateRoute.jsx import { Navigate,useLocation} from 'react-router-dom'; import { useAuth } from '../context/auth-user'; import Panel from './Panel'; export default function PrivateRoute({children,...rest}) { const {isAuthenticated} = useAuth() const location = useLocation() return ( <> {isAuthenticated ?<Panel /> :<Navigate to={'/login'} state={{from : location}} />} > )}
//Login.jsx import React, { useLayoutEffect } from 'react'; import { useAuth } from '../context/auth-user'; import { useLocation, useNavigate } from 'react-router-dom'; export default function Login() { const location = useLocation() const navigate = useNavigate() const {signInWithEmailAndPassword , isAuthenticated ,isPending} = useAuth() const { from } = location.state || {from : {pathname : '/panel'}} useLayoutEffect(()=>{ if(isAuthenticated){ navigate(from) } },[isAuthenticated, from ]) return ( <button onClick={()=>signInWithEmailAndPassword('7learn', 1)}>Loginbutton> )}
میشه به من بگین این روش درسته یا اینک روش بهترش چی هست
خیلی ممنونم