استاد من با توجه به این در ورژن 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>
)}
میشه به من بگین این روش درسته یا اینک روش بهترش چی هست
خیلی ممنونم