React Error - No routes matched location "/"

user_14249681 0
Viewed 1715

I have a problem with routing in React, using this code i receive warning "No routes matched location "/". Can anyone help me?

{isLogged ?
        <div className={'app-wrapper d-flex'}>
            <NavbarContainer/>
            <div className={`content-wrapper`}>
                <Routes>
                    <Route path={'/'}
                           element={<Employees/>}/>
                    {isLogged && user.roles.includes('Admin' || 'ADMIN') ?
                        <Route path={'add-employees'} element={<AddEmployeeContainer/>}/>
                        : null}
                </Routes>
            </div>
        </div> : <>
            <Routes>
                <Route path={'login'}
                       element={<LoginContainer/>}/>
                <Route path={'registration'} element={<RegistrationContainer/>}/>
            </Routes>
        </>
 }
react-router-dom react-router reactjs
2 Answers

You are missing a route on path "/" when isLogged is false.

Instead of conditionally rendering one set of routes or another, just render all of your routes and implement auth redirection.

const AdminLayout = ({ isLogged, user }) => 
  isLogged && user.roles.includes('Admin' || 'ADMIN')
    ? <Outlet />
    : <Navigate to="/login" replace />;

...

<div className={'app-wrapper d-flex'}>
  <NavbarContainer/>
  <div className={`content-wrapper`}>
    <Routes>
      <Route element={<AdminLayout isLogged={isLogged} user={user} />}>
        <Route path={'/add-employees'} element={<AddEmployeeContainer />} />
      </Route>
      <Route path="/" element={<Employees/>} />
      <Route path="/login" element={<LoginContainer />} />
      <Route path="/registration" element={<RegistrationContainer />} />
    </Routes>
  </div>
</div>
user_86908570

You should replace path={'/'} with this one path="/"

user_135448490
Related