I have multiple components with different paths (routes) and would like to export those to a single Main router component.
For example:
routeComponent1.js
export default function childRoutes() {
return (
<div>
<Route path="/foo" component={foo} />
<Route path="/bar" component={bar} />
</div>
);
}
routeComponent2.js
export default function childRoutes2() {
return (
<div>
<Route path="/foo2" component={foo2} />
<Route path="/bar2" component={bar2} />
</div>
);
}
I would like to use it in
root.js
import routeComponent1 from 'routeComponent1.js';
import routeComponent2 from 'routeComponent2.js';
class Root extends Component {
constructor(props) {
super(props);
}
render() {
return <Router>{routeComponent1}</Router>;
}
}
It is giving an error - Invariant Violation: <Route> elements are for router configuration only and should not be rendered.
Expecting the
<Router>
<div>
<Route path="/foo" component={foo} />
<Route path="/bar" component={bar} />
</div>
</Router>
routeComponent1 and routeComponent2 are React components. React components are Capitalized and rendered as JSX.
Example:
import RouteComponent1 from 'routeComponent1.js';
import RouteComponent2 from 'routeComponent2.js';
class Root extends Component {
render() {
return (
<Router>
<RouteComponent1 />
<RouteComponent2 />
</Router>
);
}
}
Assuming you're using the latest version of react router (v6), you can use nested routes as described here: https://reactrouter.com/en/main/start/overview#nested-routes
So this is what your App.jsx might look like:
import {
BrowserRouter as Router, Routes, Route
} from "react-router-dom";
import {AuthRoute, NonAuthRoute, UserParent} from "../components";
import {
Dasboard, UserList, CreateUser, SignIn, Page404
} from "./pages"
// Define your paths here ...
export const paths = {
SIGN_IN: "/sign-in",
DASHBOARD: "/dashboard",
LIST_USERS: "/users/list"
CREATE_USERS: "/users/create"
}
// All your routes which require authentication (requires login)
const authRoutes = [
{
path: paths.DASHBOARD,
element: <Dashboard />
},
]
// Authenticated routes but need a particular parent component
const userAuthRoutes = [
{
path: paths.LIST_USERS,
element: <UserList />
},
{
path: paths.CREATE_USERS,
element: <CreateUser />
}
]
// Paths that dont require authentication
const nonAuthRoutes = [
{
path: paths.SIGN_IN,
element: <SignIn />
},
]
const App = () => {
return (
<Router>
<Routes>
{/* AUTHENTICATED ROUTES */}
<Route element={<AuthRoute />}>
{authRoutes.map((route, index) =>
<Route key={index} {...route} />;
)}
{/* User Management */}
<Route element={<UserParent />}>
{userAuthRoutes.map((route, index) =>
<Route key={index} {...route} />
)}
</Route>
</Route>
{/* NON-AUTH ROUTES */}
<Route element={<NonAuthRoute />}>
{nonAuthRoutes.map((route, index) =>
<Route key={index} {...route} />;
)}
</Route>
<Route path="*" element={<Page404 />} />
</Routes>
</Router>
)
}
I'm having a problem in getting the output of the "match" object value in this parameter routing code.
This is class where I use match:
import React from "react";
const ProductDetails = (props) => {
console.log(props.match);
return <h1>Details No. </h1>;
};
export default ProductDetails;
And the code I use for using the route is:
import React, { Component } from "react";
import NavBar from "./navbar";
import ProductDetails from "./productDetails";
class App extends Component {
render() {
return (
<React.Fragment>
<NavBar
productsCount={this.state.Product.filter((p) => p.count > 0).length}
/>
<main className="container">
<Routes>
<Route path="/about" element={<About />} />
<Route path="/" element={<Home />} />
<Route path="/contact" element={<Contact />} />
<Route
path="/cart"
element={
<ShoppingCart
products={this.state.Product}
onReset={this.resetData}
onIncrement={this.incrementEntry}
onDelete={this.deleteEntery}
/>
}
/>
<Route path="/products/:id" element={<ProductDetails />} />
</Routes>
</main>
</React.Fragment>
);
}
}
And I get the answer as "undefined" and a lot of red errors msgs.
if you are using react router v6 and what you want to do is getting the id, it would be:
import React from "react";
const ProductDetails = () => {
const {id} = useParams();
return <h1>Details No. {id}</h1>;
};
export default ProductDetails;
or if you really want the match object:
import React from "react";
const ProductDetails = () => {
const match = useMatch();
return <h1>Details No.</h1>;
};
export default ProductDetails;
What is element? If you use react-router-dom for routing you must set the component for any route.
<BrowserRouter>
<Route path ="/about" component= {<About />} />
<Route path ="/" component= {<Home/>}/>
<Route path ="/contact" component= {<Contact/>}/>
<Route path ="/cart" component= {<ShoppingCart
products= {this.state.Product}
onReset ={this.resetData}
onIncrement ={this.incrementEntry}
onDelete = {this.deleteEntery}/>}/>
<Route path="/products/:id" component={<ProductDetails />}/>
</BrowserRouter>
I'm using React Router v6 and am creating private routes for my application.
In file PrivateRoute.js, I've the code
import React from 'react';
import {Route,Navigate} from "react-router-dom";
import {isauth} from 'auth'
function PrivateRoute({ element, path }) {
const authed = isauth() // isauth() returns true or false based on localStorage
const ele = authed === true ? element : <Navigate to="/Home" />;
return <Route path={path} element={ele} />;
}
export default PrivateRoute
And in file route.js I've written as:
...
<PrivateRoute exact path="/" element={<Dashboard/>}/>
<Route exact path="/home" element={<Home/>}/>
I've gone through the same example React-router Auth Example - StackBlitz, file App.tsx
Is there something I'm missing?
I ran into the same issue today and came up with the following solution based on this very helpful article by Andrew Luca
In PrivateRoute.js:
import React from 'react';
import { Navigate, Outlet } from 'react-router-dom';
const PrivateRoute = () => {
const auth = null; // determine if authorized, from context or however you're doing it
// If authorized, return an outlet that will render child elements
// If not, return element that will navigate to login page
return auth ? <Outlet /> : <Navigate to="/login" />;
}
In App.js (I've left in some other pages as examples):
import './App.css';
import React, {Fragment} from 'react';
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
import Navbar from './components/layout/Navbar';
import Home from './components/pages/Home';
import Register from './components/auth/Register'
import Login from './components/auth/Login';
import PrivateRoute from './components/routing/PrivateRoute';
const App = () => {
return (
<Router>
<Fragment>
<Navbar/>
<Routes>
<Route exact path='/' element={<PrivateRoute/>}>
<Route exact path='/' element={<Home/>}/>
</Route>
<Route exact path='/register' element={<Register/>}/>
<Route exact path='/login' element={<Login/>}/>
</Routes>
</Fragment>
</Router>
);
}
In the above routing, this is the private route:
<Route exact path='/' element={<PrivateRoute/>}>
<Route exact path='/' element={<Home/>}/>
</Route>
If authorization is successful, the element will show. Otherwise, it will navigate to the login page.
Only Route components can be a child of Routes. If you follow the v6 docs then you'll see the authentication pattern is to use a wrapper component to handle the authentication check and redirect.
function RequireAuth({ children }: { children: JSX.Element }) {
let auth = useAuth();
let location = useLocation();
if (!auth.user) {
// Redirect them to the /login page, but save the current location they were
// trying to go to when they were redirected. This allows us to send them
// along to that page after they login, which is a nicer user experience
// than dropping them off on the home page.
return <Navigate to="/login" state={{ from: location }} />;
}
return children;
}
...
<Route
path="/protected"
element={
<RequireAuth>
<ProtectedPage />
</RequireAuth>
}
/>
The old v5 pattern of create custom Route components no longer works. An updated v6 pattern using your code/logic could look as follows:
const PrivateRoute = ({ children }) => {
const authed = isauth() // isauth() returns true or false based on localStorage
return authed ? children : <Navigate to="/Home" />;
}
And to use
<Route
path="/dashboard"
element={
<PrivateRoute>
<Dashboard />
</PrivateRoute>
}
/>
Complement to reduce lines of code, make it more readable and beautiful.
This could just be a comment but I don't have enough points, so I'll
put it as an answer.
Dallin's answer works but Drew's answer is better! And just to complete Drew's answer on aesthetics, I recommend creating a private component that takes components as props instead of children.
Very basic example of private routes file/component:
import { Navigate } from 'react-router-dom';
const Private = (Component) => {
const auth = false; //your logic
return auth ? <Component /> : <Navigate to="/login" />
}
Route file example:
<Routes>
<Route path="/home" element={<Home />} />
<Route path="/user" element={<Private Component={User} />} />
</Routes>
I know that this is not exactly the recipe on how to make PirvateRoute work, but I just wanted to mention that the new documentation recommends a slightly different approach to handle this pattern with react-router v6:
<Route path="/protected" element={<RequireAuth><ProtectedPage /></RequireAuth>} />
import { Navigate, useLocation } from "react-router";
export const RequireAuth: React.FC<{ children: JSX.Element }> = ({ children }) => {
let auth = useAuth();
let location = useLocation();
if (!auth.user) {
return <Navigate to="/login" state={{ from: location }} />;
}
return children;
};
And you are supposed to add more routes inside ProtectedPage itself if you need it.
See the documentation and an example for more details. Also, check this note by Michael Jackson that goes into some implementation details.
Just set your router component to element prop:
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/dashboard" element={<Dashboard />} />
</Routes>
You can also check for upgrading from v5.
Remove the PrivateRoute component from your project and use the following code in your App.js files:
import {Navigate} from "react-router-dom";
import {isauth} from 'auth'
...
<Route exact path="/home" element={<Home/>}/>
<Route exact path="/" element={isauth ? <Dashboard/> : <Navigate to="/Home" />}/>
It's 2022 and I did something like below:
// routes.tsx
import { lazy } from "react";
import { Routes, Route } from "react-router-dom";
import Private from "./Private";
import Public from "./Public";
const Home = lazy(() => import("../pages/Home/Home"));
const Signin = lazy(() => import("../pages/Signin/Signin"));
export const Router = () => {
return (
<Routes>
<Route path="/" element={Private(<Home />)} />
<Route path="/signin" element={Public(<Signin />)} />
</Routes>
);
};
// Private.tsx
import { Navigate } from "react-router-dom";
import { useEffect, useState } from "react";
function render(c: JSX.Element) {
return c;
}
const Private = (Component: JSX.Element) => {
const [hasSession, setHasSession] = useState<boolean>(false);
useEffect(() => {
(async function () {
const sessionStatus = await checkLoginSession();
setHasSession(Boolean(sessionStatus));
})();
}, [hasSession, Component]);
return hasSession ? render(Component) : <Navigate to="signin" />;
};
export default Private;
Hope this helps!
React Router v6, some syntactic sugar:
{auth && (
privateRoutes.map(route =>
<Route
path={route.path}
key={route.path}
element={auth.isAuthenticated ? <route.component /> : <Navigate to={ROUTE_WELCOME_PAGE} replace />}
/>
)
)}
I tried all answers, but it always displayed the error:
Error: [PrivateRoute] is not a component. All component children of must be a or <React.Fragment>
But I found a solution ))) -
In PrivateRoute.js file:
import React from "react"; import { Navigate } from "react-router-dom";
import {isauth} from 'auth'
const PrivateRoute = ({ children }) => {
const authed = isauth()
return authed ? children : <Navigate to={"/Home" /> };
export default ProtectedRoute;
In the route.js file:
<Route
path="/"
element={
<ProtectedRoute >
<Dashboard/>
</ProtectedRoute>
}
/>
<Route exact path="/home" element={<Home/>}/>
Children of Routes need to be Route elements, so we can change the ProtectedRoute:
export type ProtectedRouteProps = {
isAuth: boolean;
authPath: string;
outlet: JSX.Element;
};
export default function ProtectedRoute({
isAuth,
authPath,
outlet,
}: ProtectedRouteProps) {
if (isAuth) {
return outlet;
} else {
return <Navigate to={{pathname: authPath}} />;
}
}
And then use it like this:
const defaultProps: Omit<ProtectedRouteProps, 'outlet'> = {
isAuth: //check if user is authenticated,
authPath: '/login',
};
return (
<div>
<Routes>
<Route path="/" element={<ProtectedRoute {...defaultProps} outlet={<HomePage />} />} />
</Routes>
</div>
);
This is the simple way to create a private route:
import React from 'react'
import { Navigate } from 'react-router-dom'
import { useAuth } from '../../context/AuthContext'
export default function PrivateRoute({ children }) {
const { currentUser } = useAuth()
if (!currentUser) {
return <Navigate to='/login' />
}
return children;
}
Now if we want to add a private route to the Dashboard component we can apply this private route as below:
<Routes>
<Route exact path="/" element={<PrivateRoute><Dashboard /></PrivateRoute>} />
</Routes>
For longer elements
<Router>
<div>
<Navbar totalItems={cart.total_items}/>
<Routes>
<Route exact path='/'>
<Route exact path='/' element={<Products products={products} onAddToCart={handleAddToCart}/>}/>
</Route>
<Route exact path='/cart'>
<Route exact path='/cart' element={<Cart cart={cart}/>}/>
</Route>
</Routes>
</div>
</Router>
Header will stay on all page
import React from 'react';
import {
BrowserRouter,
Routes,
Route
} from "react-router-dom";
const Header = () => <h2>Header</h2>
const Dashboard = () => <h2>Dashboard</h2>
const SurveyNew = () => <h2>SurveyNew</h2>
const Landing = () => <h2>Landing</h2>
const App = () =>{
return (
<div>
<BrowserRouter>
<Header />
<Routes >
<Route exact path="/" element={<Landing />} />
<Route path="/surveys" element={<Dashboard />} />
<Route path="/surveys/new" element={<SurveyNew/>} />
</Routes>
</BrowserRouter>
</div>
);
};
export default App;
<Route path='/' element={<Navigate to="/search" />} />
You can use a function for a private route:
<Route exact path="/login" element={NotAuth(Login)} />
<Route exact path="/Register" element={NotAuth(Register)} />
function NotAuth(Component) {
if (isAuth)
return <Navigate to="/" />;
return <Component />;
}
I'm using "react-router-dom": "^6.3.0" and this is how I did mine
PrivateRoute Component and Route
import {Route} from "react-router-dom";
const PrivateRoute = ({ component: Compontent, authenticated }) => {
return authenticated ? <Compontent /> : <Navigate to="/" />;
}
<Route
path="/user/profile"
element={<PrivateRoute authenticated={true} component={Profile} />} />
For the error "[Navigate] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>", use the following method maybe solved:
DefaultPage is when no match router. Jump to the DefaultPage. Here use the <Route index element={} /> to replace the
<Navigate to={window.location.pathname + '/kanban'}/>
See Index Routes
<Routes>
<Route path={'/default'} element={<DefaultPage/>}/>
<Route path={'/second'} element={<SecondPage/>}/>
{/* <Navigate to={window.location.pathname + '/kanban'}/> */}
<Route index element={<DefaultPage/>} />
</Routes>
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<h1>home page</h1>} />
<Route path="/seacrch" element={<h1>seacrch page</h1>} />
</Routes>
</Router>
);
}
export default App;
I am trying to show different Layouts using React. I have Navbar with links. For every links (Service, Works, Contact...etc) I want to render Navbar, but for SignIn link I don't want to show it. So my code is following:
import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import PublicLayout from './components/layouts/PublicLayout';
import SigninLayout from './components/layouts/SigninLayout';
import Main from './components/pages/Main';
import Services from './components/pages/Services';
import Price from './components/pages/Price';
import Works from './components/pages/Works';
import Signin from './components/pages/Signin';
import NotFound from './components/pages/NotFound';
class App extends Component {
render() {
return (
<BrowserRouter>
<div className="App">
<Switch>
<PublicLayout>
<Route exact path='/' component={Main} />
<Route exact path='/services' component={Services} />
<Route exact path='/prices' component={Price} />
<Route exact path='/works' component={Works} />
</PublicLayout>
<SigninLayout>
<Route exact path='/signin' component={Signin} />
</SigninLayout>
<Route path="*" component={NotFound} />
</Switch>
</div>
</BrowserRouter>
);
}
}
export default App;
I expect that SigninLayout should use for SignIn url. But I still see Navbar instead. This is my SigninLayout code:
import React, { Component } from 'react';
class SigninLayout extends Component {
state = {
}
render() {
return (
<div>
{ this.props.children }
</div>
);
}
}
export default SigninLayout;
And this is my SignIn component:
import React, { Component } from 'react';
class Signin extends Component {
state = {
}
render() {
return (
<div>
<h1>Войти</h1>
<form>
<input type="text" placeholder="укажите e-mail" />
<input type="text" placeholder="укажите пароль" />
<button>Войти</button>
</form>
</div>
);
}
}
export default Signin;
Why the Navbar is showing? What I'm doing wrong?
UPD:
import React, { Component } from 'react';
import Navbar from '../nav/Navbar';
class PublicLayout extends Component {
state = {
items: [
{ id: 1, name: 'Услуги', link: '/services' },
{ id: 2, name: 'Цены', link: '/prices' },
{ id: 3, name: 'Как это работает?', link: '/works' },
{ id: 4, name: 'Войти', link: '/signin' },
]
}
render() {
return (
<div>
<Navbar items={ this.state.items } />
{ this.props.children }
</div>
);
}
}
export default PublicLayout;
First of all let's use <Switch>, no need to evaluate any other route if you already found your one:
class App extends Component {
render() {
return (
<BrowserRouter>
<div className="App">
<Switch>
<Route exact path='/signin' component={SigninLayout} />
<Route component={PublicLayout} />
</Switch>
</div>
</BrowserRouter>
);
}
}
Note that we're selecting between two layouts here, sub-routes will go there. This was your error: an outer component (PublicLayout and SigningLayout) will be rendered even if none of its children are visible (well...unless it's empty itself).
const PublicLayout = () => (
<Switch>
<Route exact path='/' component={Main} />
<Route exact path='/services' component={Services} />
<Route exact path='/prices' component={Price} />
<Route exact path='/works' component={Works} />
</Switch>
);
Parallel with SigningLayout should be easy. Of course that's just an example but should be trivial to (untested):
const App = () => (
<BrowserRouter>
<div className="App">
<Switch>
<Route exact path='/signin'>
<SigningLayout><SignIn /></SigningLayout>
</Route>
<Route>
<PublicLayout>
<Switch>
<Route exact path='/' component={Main} />
<Route exact path='/services' component={Services} />
<Route exact path='/prices' component={Price} />
<Route exact path='/works' component={Works} />
</Switch>
<PublicLayout>
</Route>
</Switch>
</div>
</BrowserRouter>
);
I would suggest a bit restructuring of Switch
class App extends Component {
render() {
return (
<BrowserRouter>
<div className="App">
<Switch>
<SigninLayout>
<Route exact path='/signin' component={Signin} />
</SigninLayout>
<PublicLayout>
<Route exact path='/' component={Main} />
<Route exact path='/services' component={Services} />
<Route exact path='/prices' component={Price} />
<Route exact path='/works' component={Works} />
</PublicLayout>
<Route path="*" component={NotFound} />
</Switch>
</div>
</BrowserRouter>
);
}
}
My routes file is getting rather messy so I decided to split them out into separate files.
My problem is that if I used 2 separate files, whichever comes after the first include does not get rendered:
const routes = (
<div>
<Switch>
<Route exact path="/" component={Home} />
{Registration} //Does get rendered
//Everything below this does not get a route
{Faq}
<Route path="/login" component={login} />
<Route component={NoMatch} />
</Switch>
</div>
);
If I switch Faq with registration then all the Faq routes will work.
RegistrationRoutes.js
import Introduction from '../containers/Registration/Introduction';
import Login from '../containers/Login';
const Routes = (
<Switch>
<Route path="/login" component={Login} key="login" />,
<Route path="/registration/introduction" component={Introduction} key="registration-intro" />
</Switch>
);
export default Routes;
FaqRoutes.js
import Faq from '../containers/Faq';
import faqJson from '../json_content/faq/faq';
import FaqCategory from '../containers/Faq/faqCategory';
const Routes = (
<Switch>
<Route path="/faq/:category" component={FaqCategory} key="faqCat" />
<Route path="/faq" render={props => <Faq data={faqJson} />} key="faq" />
</Switch>
);
export default Routes;
May be you can move them to config file and load them from there.
App.tsx
import routes from "./routes";
const App: React.FC = () => {
return (
<BrowserRouter>
<div>
<Switch>
{routes.data.map((entry) => {return (<Route {...entry}/>)})}
</Switch>
</div>
</BrowserRouter>
);
};
export default App;
router.ts
const routes = {data: [
{
key: "one",
path: "/three"
},
{
key: "two",
path: "/two"
}
]
}
export default routes;
This will keep your code simple
Your code would get translated to something like this,
const routes = (
<div>
<Switch>
<Route exact path="/" component={Home} />
<Switch>
<Route path="/login" component={Login} key="login" />,
<Route path="/registration/introduction"
component={Introduction} key="registration-intro" />
</Switch>
//Everything below this does not get a route
{Faq}
<Route path="/login" component={login} />
<Route component={NoMatch} />
</Switch>
</div>
);
This is wrong way to implement routing with react-router-dom or React-Router v4.
For Correct way of implementation You can see this example.
index.js
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Switch, Route, Link } from "react-router-dom";
import LandingPage from "../Registration";
const Home = () => {
return <div>
Home Component
<Link to="/auth/login">Login</Link>
</div>;
};
function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<BrowserRouter>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/auth" component={LandingPage} />
</Switch>
</BrowserRouter>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Registration.js
import React, { Component } from 'react';
import { Switch, Route, Link, Redirect } from 'react-router-dom';
const LoginRegister = (props) => {
return (
<div>
Login or register
<Link to="/login">Login</Link>
<br />
<Link to="/signup" >Signup</Link>
</div>
);
}
const Login = (props) =>{
console.log("login ", props);
return (
<div>
Login Component
<Link to="/auth/signup" >Signup</Link>
</div>
);
}
const Signup = () => (
<div>
Signup component
<Link to="/auth/login" >Login</Link>
</div>
);
class LandingPage extends Component {
render() {
console.log('Landing page',this.props);
const loginPath = this.props.match.path +'/login';
const signupPath = this.props.match.path + '/signup';
console.log(loginPath);
return (
<div className="container" >
Landing page
<Switch>
<Route path={loginPath} component={Login} />
<Route path={signupPath} component={Signup} />
<Route path="/" exact component={LoginRegister} />
</Switch>
</div>
);
}
}
export default LandingPage;
Try the following
RegistrationRoutes.js
import Introduction from '../containers/Registration/Introduction';
import Login from '../containers/Login';
const Routes = (
<React.Fragment>
<Route path="/login" component={Login} key="login" />,
<Route path="/registration/introduction" component={Introduction} key="registration-intro" />
</React.Fragment>
);
export default Routes;