如何在反应 v6 中重定向答案

【问题标题】：how to redirect in react v6如何在反应 v6 中重定向
【发布时间】：2022-01-20 23:29:46
【问题描述】：

我需要在登录后导航回原来请求的 URL。

例如用户输入www.eCart.com/Cart，因为用户没有通过身份验证，它会导航到登录页面www.eCart.com/login。

一旦通过身份验证，它应该会自动导航回www.eCart.com/Cart

我的 protectedRoute.js 看起来像这样

import React from 'react'
import { connect } from 'react-redux'
import { Navigate, Outlet, useLocation, useNavigate} from 'react-router-dom'

export const withRouter = (Component) => { //works only for react16-17 //hooks
    const Wrapper = (props) => {
        const location = useLocation()
        const navigate = useNavigate();
        return (
            <Component
                navigate = {navigate}
                {...props}
                location={location}
                {...props}
            />
        );
    };

    return Wrapper;
};

const ProtectedRoute = ({component:Component, auth,...rest}) => (

    auth.isAuthenticated ? <Outlet /> : <Navigate to={`/login/${rest.location.search}`} replace />
    
)

const mapStateToProps = (state) => ({
    auth: state.auth
})

export default connect(mapStateToProps)(withRouter(ProtectedRoute))

我的 app.js 是这样的

function App(props) {
  useEffect(() => {
    store.dispatch(setCurrentUser())
  }, [])

  const grabProductsFromStorage = () =>{
    const userId = decodeUser().user.id
    const cartProducts = JSON.parse(localStorage.getItem("products"))
    const context = {products: cartProducts, userId}
    store.dispatch(addToCart(context))
    localStorage.removeItem("products")
  }

  if(localStorage.getItem("token") && localStorage.getItem("products")){
    grabProductsFromStorage()
  }

  return (
    <Provider store={store}>
      <Router>
        <Routes>
        <Route exact path="/" element={<Landing/>} />
        <Route exact path="/products/:id" element={<ProductDetails/>} />
          <Route exact path="/" element={<ProtectedRoute/>}>  
            <Route  exact
              path="/dashboard/*" 
              element={<Dashboard {...props} nestedRoute={Home} />} 
            />
            <Route exact path="/cart" element={<Cart />} />
          </Route>
          <Route exact path="/register" element={<Register/>} />
          <Route exact path="/login" element={<Login/>} />
        </Routes>
      </Router>
    </Provider>

  );
}

另外，我在某个地方看到了在导航中使用状态的位置，但是当我这样做时，它会抛出 Unexpected use of 'location' 的错误

【问题讨论】：

stackoverflow.com/a/70392061/10599450 有用吗？
它的简单导航到不同的页面我想在认证后返回上一页或路由
如果你需要去上一页试试这个，让navigation = useNavigate();函数前一个（）{导航（-1）}前一个（）

标签： javascript reactjs

【解决方案1】：

您需要先存储该购物车路线。如果用户未通过身份验证并重定向到登录页面，则从购物车重定向到登录页面时，您需要将购物车路由存储在本地存储或您所在州的某个地方，以便登录后您可以检查我们是否有登录后路由，然后您可以重定向用户访问该页面。

【讨论】：

我试图以这样的状态存储位置：return auth.isAuthenticated ? : /login/${location.search}} replace state={{location}}/> 但它仍然没有进入之前的状态

【解决方案2】：

有一些方法：

将用户重定向到另一个页面：

 function Redirect() {
  let navigate = useNavigate();
  function handleClick() {
    navigate('/home')
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}

重定向到上一页

function Redirect() {
  let navigate = useNavigate();
  function handleClick() {
    navigate(-1)
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}

将用户重定向到下一页

function Redirect() {
  let navigate = useNavigate();
  function handleClick() {
    navigate(1)
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );

【讨论】：