تابستون داره تموم میشه ها، فرصت‌ها محدودن کلی آفر جذاب در کمپین تابستون🔥👇
۰ ثانیه
۰ دقیقه
۰ ساعت
۱ ali nazari
حل به روش React-router V6
جامعه ری اکت ایجاد شده در ۲۳ تیر ۱۴۰۱

استاد من با توجه به این در ورژن 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>
)}

میشه به من بگین این روش درسته یا اینک روش بهترش چی هست

خیلی ممنونم

سلام وقتتون بخیر.

بله به درستی موارد رو با v6 جایگزین کردید و با مواردی که استاد گفتن همخونی داره کدتون .

موفق باشید.

بهترین پاسخ
علیرضا ایمانی ۲۴ تیر ۱۴۰۱، ۰۰:۵۳