如何在 React Router 4 中實作經過驗證的路由？

在React Router 4 中管理經過驗證的路由

React Router 4 引入了一些更改，這些更改阻止使用傳統方法直接實現經過身份驗證的路由。為了解決這個問題，讓我們探索替代解決方案。

遇到錯誤：

在您的初始實作中，您嘗試使用和同時，這在React Router 4 中是被禁止的。

建議的方法：

為了克服這個錯誤，我們可以利用 元件與自訂 結合使用成分。 元件將根據 authed 屬性有條件地渲染，如果使用者未經過身份驗證，則顯示所需的路由或重定向到登入頁面。

PrivateRoute 元件：

function PrivateRoute ({component: Component, authed, ...rest}) {
  return (
    <Route
      {...rest}
      render={(props) => authed === true
        ? <Component {...props} />
        : <Redirect to={{pathname: '/login', state: {from: props.location}}} />}
    />
  )
}

更新的路由：

<Route path='/' exact component={Home} />
<Route path='/login' component={Login} />
<Route path='/register' component={Register} />
<PrivateRoute authed={this.state.authed} path='/dashboard' component={Dashboard} />

更新的路由：

您對在render 中調度操作的關注（ ) 方法有效。通常不鼓勵這樣做，因為它可能導致潛在的副作用和效能問題。相反，您應該在生命週期方法（如 componentDidMount）中分派操作，或使用 React 的狀態管理工具（如 Redux 或 Context API）。

以上是如何在 React Router 4 中實作經過驗證的路由？的詳細內容。更多資訊請關注PHP中文網其他相關文章！