How to protect routes?

Question

JavaScript

Routing:

const guestRoutes = (
        <Routes>
            <Route path="/"        element={<h1>О проекте</h1>} />
            <Route path="/account" element={<h1>Войти</h1>} />
        </Routes>
    );

    const userRoutes = (
        <Routes>
            <Route path="/"               element={<h1>О проекте</h1>} />
            <Route path="/todo-create"    element={<h1>Создать</h1>} />
            <Route path="/todo-update/:id" element={<h1>Редактировать</h1>} />
            <Route path="/todos">
                <Route index      element={<h1>Задачи</h1>} />
                <Route path=":id" element={<h1>Одна Задача</h1>} />
            </Route>
        </Routes>
    );

    return (
        <AppContext.Provider value={{state, login, logout}}>
            <Layout>
                {state.isAuth ? userRoutes : guestRoutes}
            </Layout>
        </AppContext.Provider>
    );

Navigation:

const userNavbar = (
        <ul className="navbar__list">
            <li className="navbar__item">
                <NavbarLink to="/">Главная</NavbarLink>
            </li>
            <li className="navbar__item">
                <NavbarLink to="/todos">Задачи</NavbarLink>
            </li>
            <li className="navbar__item">
                <NavbarLink to="/todo-create">Создать</NavbarLink>
            </li>
            <li className="navbar__item">
                <NavbarButton onClick={() => logout()}>Выйти</NavbarButton>
            </li>
        </ul>
    );

    const guestNavbar = (
        <ul className="navbar__list">
            <li className="navbar__item">
                <NavbarLink to="/todos">Главная</NavbarLink>
            </li>
            <li className="navbar__item">
                <NavbarLink to="/account">Войти</NavbarLink>
            </li>
        </ul>
    );

    return (
        <nav className="navbar">
            <div className="navbar__body">
                {state.isAuth ? userNavbar : guestNavbar}
            </div>
        </nav>
    );

Depending on the change in state.isAuth, both navigation and routing in general change, that is, there is protection, but it does not work quite the way I need. If an unauthorized user enters the address "/todos", then the application navigates to this path, but does not show anything How to implement functionality that will not open paths that are not available?

- I'm a beginner, so maybe I somehow messed up in the already existing code?)
- Links are made using NavLink, I just put it in a separate UI component, like NavbarButton

Answer 1

It's easier to use Google and find a route recipe. Its essence lies in wrapping all routes in a function that checks either authorization or membership in a role. This is what, in fact, already exists, but is missing from the classic redirect recipe, if there is no access and a path that covers everything that is not included in the list, it is indicated by the symbol “*”.