Develop Reference

Why unable to use protectRoute inside Router in react?

I have a react application in which users can access the homepage only after login/signup.
I have used protectRoutes to implement this , however I m getting the following error inside Router component:
A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.
The code for app.js file:
import {useState} from 'react'
import './App.css';
import {Routes,Route,Link} from 'react-router-dom'
import SignupPage from './Pages/SignupPage';
import LoginPage from './Pages/LoginPage';
import Homepage from './Pages/Homepage';
import PrivateRoute from "./Pages/PrivateRoute";
import {HashRouter as Router} from 'react-router-dom'
function App() {
const [username,setUsername]=useState("");
const [currentUser,setCurrentUser]=useState({});
return (
<Router>
<div className="App">
<Route path="/" exact element={<SignupPage></SignupPage>}/>
<Route path="/signup" exact element={<SignupPage currentuser={currentUser} setcurrentuser={setCurrentUser} setusername={setUsername}></SignupPage>}/>
<Route path="/login" exact element={<LoginPage></LoginPage>}/>
<PrivateRoute path="/homepage" exact currentuser={currentUser} element={<Homepage user={currentUser} username={username} setusername={setUsername}></Homepage>}/>
</div>
</Router>
);
}
export default App;
Whats the error here and how do I fix it?

Issue
You are rendering Route components directly and are not wrapping them in a Routes component.
Solution
Refactor the PrivateRoute component to render an Outlet component instead of a Route and wrap the routes you want to protect.
Example:
import { Navigate, Outlet } from 'react-router-dom';
const PrivateRoute = ({ currentuser }) => {
// auth business logic
return isAuthenticated
? <Outlet />
: <Navigate to="/login" replace />;
};
...
import { HashRouter as Router, Routes, Route, Link} from 'react-router-dom'
function App() {
const [username,setUsername]=useState("");
const [currentUser,setCurrentUser]=useState({});
return (
<Router>
<div className="App">
<Routes>
... unprotected routes ...
<Route path="/" element={<SignupPage />} />
<Route
path="/signup"
element={(
<SignupPage
currentuser={currentUser}
setcurrentuser={setCurrentUser}
setusername={setUsername}
/>
)}
/>
<Route path="/login" element={<LoginPage />} />
...
<Route element={<PrivateRoute currentuser={currentUser} />}>
... protected routes ...
<Route
path="/homepage"
element={(
<Homepage
user={currentUser}
username={username}
setusername={setUsername}
/>
)}
/>
...
</Route>
</Routes>
</div>
</Router>
);
}

React Router Dom, protected route, getting ProtectedRoute is not a route

I created file auth.js file and ProtectedRoute.js in my application. Using JWT in API created a token and stored in local storage while login into my application. In my app.js imported the Authprovider and ProtectedRoute it shows error in route .please check my code and tell me where i made mistake
auth.js
import { useContext, createContext } from "react";
const AuthContext = createContext(null)
export const AuthProvider=({ children })=>{
const keyToken = localStorage.getItem("token");
const user = localStorage.getItem("name");
const userid = localStorage.getItem("id");
const pimg = localStorage.getItem("profile");
return(
<AuthContext.Provider value={{ keyToken,user,userid,pimg}}> {children}
</AuthContext.Provider>
)
}
export const useAuth = () => {
return useContext(AuthContext)
}
protectedRoute.js
import React from "react";
import { Navigate , Route } from "react-router-dom";
import {useAuth} from "./auth"
function ProtectedRoute({ component: Component, ...restOfProps }) {
const auth=useAuth();
const isAuthenticated = auth.keyToken;
console.log("this", isAuthenticated);
return (
<Route
{...restOfProps}
render={(props) =>
false ? <Component {...props} /> : <Navigate to="/login" />
}
/>
);
}
export default ProtectedRoute;
App.js
import React from "react";
import ReactDOM from "react-dom";
import {BrowserRouter as Router,Routes,Route} from 'react-router-dom';
import Login from "./components/SignIn";
import Category from "./pages/Category";
import Addcategory from "./pages/Addcategory";
import Subcategory from "./pages/Subcategory";
import Dashboard from "./pages/Dashboard";
import { Profile } from "./components/Profile";
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { AuthProvider} from "./components/authentication/auth";
import ProtectedRoute from "./components/authentication/protectedRoute";
function App() {
return (
<AuthProvider>
<Router>
<Routes>
<Route exact path='/' element={< Login />}></Route>
<Route exact path='/login' element={< Login />}></Route>
<ProtectedRoute exact path='/dashboard' element={ Dashboard}/>
{/*<Route exact path='/dashboard' element={< Dashboard />}></Route>*/}
<Route exact path='/category' element={< Category />}></Route>
<Route exact path='/categoryAdd' element={< Addcategory />}></Route>
<Route exact path='/subcategory' element={< Subcategory />}></Route>
<Route exact path='/profile' element={< Profile />}></Route>
</Routes>
<ToastContainer />
</Router>
</AuthProvider>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
export default App;
Error showing in console:

While what you did for ProtectedRoute I think would work for React Router Dom version 5, the version 6 is slightly different. Here is one way to do it (look at this example made by the library team to know more):
App.js:
function App() {
return (
<AuthProvider>
<Router>
<Routes>
<Route exact path='/dashboard' element={ <ProtectedRoute/>}/>
</Routes>
<ToastContainer />
</Router>
</AuthProvider>
);
}
ProtectedRoute.js:
function ProtectedRoute() {
const auth=useAuth();
const isAuthenticated = auth.keyToken;
if(isAuthenticated){
return <Dashboard/>
}
return (
<Navigate to="/login" />
);
}
export default ProtectedRoute;

You have mixed code of react-router-dom v5 and v6 you can read the migrate guide upgrading from v5
Can using Outlet to render ProtectedRoute as layout. Check this example
// ProtectedRoute.js
import { Navigate, Outlet } from 'react-router-dom';
export const ProtectedRoute = () => {
const location = useLocation();
const auth = useAuth();
return auth.isAuthenticated
? <Outlet />
: <Navigate to="/login" state={{ from: location }} replace />;
};
// App.js
import { BrowserRouter, Routes, Route } from "react-router-dom";
function App() {
return (
<AuthProvider>
<BrowserRouter>
<Routes>
<Route path="/login" element={<Login />} />
<Route path="/" element={<ProtectedRoute /> }>
<Route path='dashboard' element={<Dashboard />} />
<Route path='category' element={<Category />} />
// rest of your code
</Route>
</Routes>
<ToastContainer />
</BrowserRouter>
</AuthProvider>
);
}

How can I redirect in React Router v6?

I am trying to upgrade to React Router v6 (react-router-dom 6.0.1).
Here is my updated code:
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/lab" element={<Lab />} />
<Route render={() => <Navigate to="/" />} />
</Routes>
</BrowserRouter>
The last Route is redirecting the rest of paths to /.
However, I got an error
TS2322: Type '{ render: () => Element; }' is not assignable to type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'.   Property 'render' does not exist on type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'.
However, based on the documentation, it does have render for Route. How can I use it correctly?

I think you should use the no match route approach.
Check this in the documentation: Adding a "No Match" Route
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/lab" element={<Lab />} />
<Route
path="*"
element={<Navigate to="/" replace />}
/>
</Routes>
</BrowserRouter>
To keep the history clean, you should set replace prop. This will avoid extra redirects after the user click back.

I found another way to do this:
import { useNavigate } from "react-router-dom";
let navigate = useNavigate();
useEffect(() => {
if (LoggedIn){
return navigate("/");
}
},[LoggedIn]);
See Overview, Navigation.

Create the file RequireAuth.tsx
import { useLocation, Navigate } from "react-router-dom";
import { useAuth } from "../hooks/Auth";
export function RequireAuth({ children }: { children: JSX.Element }) {
let { user } = useAuth();
let location = useLocation();
if (!user) {
return <Navigate to="/" state={{ from: location }} replace />;
} else {
return children;
}
}
Import the component to need user a private router:
import { Routes as Switch, Route } from "react-router-dom";
import { RequireAuth } from "./RequireAuth";
import { SignIn } from "../pages/SignIn";
import { Dashboard } from "../pages/Dashboard";
export function Routes() {
return (
<Switch>
<Route path="/" element={<SignIn />} />
<Route
path="/dashboard"
element={
<RequireAuth>
<Dashboard />
</RequireAuth>
}
/>
</Switch>
);
}

In version 5 of React, i.e., react-router-dom, we had the Redirect component. But in version 6 of React it is updated to the Navigate components.
We can pass replace in these components to avoid unnecessary redirects on clicking back and forward option.
Demonstration for usage is attached below:
<Route path="/" element={user ? <Home /> : <Register />} />
<Route path="/login" element={user ? <Navigate to="/" replace /> : <Login />} />
<Route path = "/register" element={user ? <Navigate to="/" replace /> : <Register />} />

FOR react-router VERSION 6
New example after editing----->(more simple easy to read)
import {BrowserRouter as Router,Routes,Route} from 'react-router-dom';
import Home from '../NavbarCompo/About';
import Contact from '../NavbarCompo/Contact';
import About from '../NavbarCompo/About';
import Login from '../NavbarCompo/Login';
import Navbar from '../Navbar/Navbar';
import Error from '../pages/error';
import Products from '../pages/products';
import Data from '../NavbarCompo/Data';
const Roter=()=>{
return (
<Router>
<Navbar />
<Routes>
<Route path='/' element={<Home />} />
<Route path='/about' element={<About />} />
<Route path='/contact' element={<Contact />} />
<Route path='/login' element={<Login />} />
<Route path='/product/:id' element={<Products />} />
<Route path='/data' element={<Data />} />
<Route path ='*' element={<Error />} />
</Routes>
</Router>
)
}
export default Roter;
Look at the example
import React from "react";
import Form from "./compo/form";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider, Route,Routes,Navigate } from "react-router-dom";
const router = createBrowserRouter([
{
path: "/",
element: <Form />
},
{
path: "/about",
element: <h1>hola amigo,you are in about section</h1>
},
{
path:"*",
element:<Navigate to="/" replace />
}
]);
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<RouterProvider router={router}></RouterProvider>
</React.StrictMode>
);
check this out
https://reactrouter.com/en/main/start/overview

<BrowserRouter>
<Routes>
<Route path="home" element={<Home />} />
<Route path="about" element={<About />} />
<Route index element={<Navigate to="/home" replace />} />
</Routes>
</BrowserRouter>

import { useNavigate } from "react-router-dom";
import { Button } from "#mui/material";
const component =()=>{
const navigate = useNavigate();
const handelGoToLogin = () => {
navigate('/auth/login')
}
return(<>
//.........
<Button onClick={handelGoToLogin} variant="outlined" color="primary" size="large" fullWidth>
Back
</Button>
</>)
}

import { useState } from "react"
import { Navigate } from "react-router-dom"
const [login, setLogin] = useState(true)
return (<>
{!login && <Navigate to="/login" />}
<>)

For class components, at the first you should make a functional component, and then use HOC technical to use useNavigate React hook.
Like this:
File withrouter.js
import {useNavigate} from 'react-router-dom';
export const withRouter = WrappedComponent => props => {
return (<WrappedComponent {...props} navigate={useNavigate()}/>);
};
Then use it in other class components like this:
export default withRouter(Signin);
And use props for redirect like this:
this.props.navigate('/');

Router is never used, but Routes do not work without importing it

If I remove Router import from Main.js (I alrady use router in index.js and Router is never used in Main.js) - app pages in Main.js stop showing app at all. Wrapping Routes in another Router does not work either. What should I do?
index.js:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById("root")
);
App.js:
import React from "react";
import Navigation from "./components/Navigation/Navigation.js";
import Main from "./components/Main/Main.js";
const App = () => {
return (
<div className="app">
<Navigation />
<Main />
</div>
);
};
export default App;
Main.js:
import React from "react";
import { BrowserRouter as Router, Route, Redirect } from "react-router-dom";
import Home from "../../pages/Home.js";
import Contacts from "../../pages/Contacts.js";
import About from "../../pages/About.js";
import CardList from "../../components/CardList/CardList.js";
const Main = () => (
<>
<Route exact path="/" component={Home}>
<Redirect to="/products" />
</Route>
<Route path={["/products/:id", "/products"]} component={CardList} />
<Route path="/about" component={About}></Route>
<Route path="/contact" component={Contacts}></Route>
</>
);
export default Main;

first routes should come between switch
const Main = () => (
<>
<Switch>
<Route exact path="/" component={Home}>
<Redirect to="/products" />
</Route>
<Route path={["/products/:id", "/products"]} component={CardList} />
<Route path="/about" component={About}></Route>
<Route path="/contact" component={Contacts}></Route>
<Switch/>
</>
);

Build independant admin router with react

I've built an app with its specific router. Now I want to improve my app by coding an admin interface. The thing is, I have components (Navbar and Footer) that surround my routes (see code below).
So if I simply create an admin interface and nest it inside my existing router, my app's navbar and footer will appear on the admin pages.
I would like to code my admin interface with its own navbar and components.
Is there a way to do so ?
AppRouter.js:
import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';
import LandingPage from '../ui/landing-page/LandingPage';
import App from '../ui/App';
import NotFoundPage from '../ui/NotFoundPage';
import NavBar from '../ui/NavBar';
import Footer from '../ui/Footer';
import FaqPage from '../ui/FaqPage';
import PrivacyPage from'../ui/PrivacyPage';
import LegalNoticePage from '../ui/LegalNoticePage';
const browserHistory = createBrowserHistory();
export const AppRouter = () => (
<Router history={browserHistory}>
<div>
<NavBar />
<Switch>
<Route exact path="/" component={LandingPage}/>
<Route exact path="/meals" component={App}/>
<Route exact path="/faq" component={FaqPage}/>
<Route exact path="/privacy" component={PrivacyPage}/>
<Route exact path="/legal_notice" component={LegalNoticePage}/>
<Route component={NotFoundPage}/>
</Switch>
<Footer />
</div>
</Router>
);
export default AppRouter;

Your <NavBar /> isn't surrounding your <Router>, it's surrounding your routes. Since you can nest Routers, you could have a <Route> which matches all path="/admin" and then within that put the admin-only NavBar.
You can read more about nested routes here.
Here's a code example:
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Switch, Route } from "react-router-dom";
const Admin = ({ match }) => (
<React.Fragment>
<h1>admin bar</h1>
<Route path={`${match.path}/1`} render={() => <h2>one</h2>} />
<Route path={`${match.path}/2`} render={() => <h2>two</h2>} />
</React.Fragment>
);
const Other = ({ match }) => (
<React.Fragment>
<h1>other bar</h1>
<Switch>
<Route path={`${match.path}/2`} render={() => <h2>one</h2>} />
<Route path={`${match.path}/2`} render={() => <h2>two</h2>} />
</Switch>
</React.Fragment>
);
const App = () => (
<BrowserRouter>
<Switch>
<Route path="/admin" component={Admin} />
<Route path="/other" component={Other} />
</Switch>
</BrowserRouter>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
And accompanying CodeSandbox.