How to Fix \'PrivateRoute is Not a \' Error in React Router v6?

React Router v6: Error with Private Route Component

You're encountering an error when defining private routes in React Router v6. The error message states that the PrivateRoute component is not a or component. This issue arises when the private routes are implemented incorrectly.

Solution

In PrivateRoute.js, replace your code with the following:

<code class="javascript">import React from 'react';
import { Navigate, Outlet } from 'react-router-dom';

const PrivateRoute = () => {
  const isAuthenticated = false; // Replace with your authentication logic

  return isAuthenticated ? <Outlet /> : <Navigate to="/home" />;
};

export default PrivateRoute;</code>

In route.js, update your code as follows:

<code class="javascript">...
<PrivateRoute exact path="/">
  <Route exact path="/" element={<Dashboard />} />
</PrivateRoute>
<Route exact path="/home" element={<Home />} /></code>

Explanation

The PrivateRoute component now utilizes the component, which allows the route's children to be rendered when authorized. The component is used to redirect the user to a specific page if they are not authenticated.

In App.js, make sure to wrap your routes in a component and use the element prop to specify the private route.

Additional Notes

• The isAuthenticated variable should be replaced with your own authentication logic.
• The path to which unauthenticated users are redirected can be customized as needed.
• If you have multiple private routes, you can use the useAuth context hook to share authentication state across the application.

The above is the detailed content of How to Fix \'PrivateRoute is Not a \' Error in React Router v6?. For more information, please follow other related articles on the PHP Chinese website!