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

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

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

遇到錯誤：

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

建議的方法：

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

PrivateRoute 元件：

function PrivateRoute ({component: Component, authed, ...rest}) {
  return (
    <route render="{(props)"> authed === true
        ? <component></component>
        : <redirect to="{{pathname:" state: props.location></redirect>}
    />
  )
}</route>

更新的路由：

<route path="/" exact component="{Home}"></route>
<route path="/login" component="{Login}"></route>
<route path="/register" component="{Register}"></route>
<privateroute authed="{this.state.authed}" path="/dashboard" component="{Dashboard}"></privateroute>

更新的路由：

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

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