如何在reactv6中重定向

我需要在登錄后導航回原始請求的 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>

  );
}

此外，我已經看到某處在導航中使用狀態和它的位置，但是當我這樣做時，它會拋出一個錯誤，即意外使用“位置”

uj5u.com熱心網友回復：

您需要先存盤該購物車路線。如果用戶未通過身份驗證并重定向到登錄頁面，則從購物車重定向到登錄頁面時，您需要將購物車路線存盤在本地存盤或您所在州的某個地方，以便登錄后您可以檢查我們是否有登錄后路線，然后您可以重定向用戶訪問該頁面。

uj5u.com熱心網友回復：

有一些方法：

將用戶重定向到另一個頁面：

 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>
  );

標籤：javascript 反应

上一篇：有什么方法可以優化功能？

下一篇：如何正確使用負前瞻？[復制]