react-router-dom-v6 更改 useHistory

Question

const Routing=()=>{
  const Navigate=useNavigate()
  const {state,dispatch}=useContext(UserContext)
  useEffect(()=>{
    const user=JSON.parse(localStorage.getItem("user"))
    if(user){
      dispatch({type:"USER",payload:user})
    }
    else{
      if(!history.location.pathname.startsWith('/reset'))
           Navigate('/signin')
      }
    },[])

因为我正在使用 react-dom-v6 ，所以我知道我需要用 Navigate 替换 history.location.path.startsWith('/reset') 并且我看过帖子，但 none 专注于此。

如果有人能告诉我，那将非常有帮助！

Answer 1

好的。在这种情况下使用 useNavigate 是错误的。您可以使用 useLocation 挂钩。你的代码应该是这样的。

const Routing = () => {
        const navigate = useNavigate();
        const location = useLocation();
        const { state, dispatch } = useContext(UserContext)
        useEffect(() => {
            const user = JSON.parse(localStorage.getItem("user"))
            if (user) {
                dispatch({ type: "USER", payload: user })
            }
            else {
                if (location.pathname.startsWith('/reset'))
                    navigate('/signin')
            }
        }, [])

你可以看看react router v6 https://reactrouter.com/docs/en/v6/getting-started/concepts#history-object

react-router-dom-v6 更改 useHistory

react-router-dom-v6 change useHistory

reactjs

react-router

mern