Есть Route но они не совмем так работают как нужно?

Question

[Yulya]

Есть Route но они не совмем так работают как нужно, Нужно что бы "/dashboard" была фиксированной после логинки, а внктри нее менялись страницы, но они почему то открываються без /dashboard.

function App() {
  const { getUser, user, setUser  } = useUser()
  return (
    <Router user={user} getUser={getUser} setUser={setUser}>
      <Routes>
        <Route  path="/"  exact element={<LoginForm user={user} getUser={getUser} />} />
        <Route path="login" exact element={<LoginForm user={user} getUser={getUser} />}/>
        <Route path="/dashboard" element={<PrivateRoute user={user}><Dashboard user={user} /></PrivateRoute>} />
        <Route path='/acts' element={<PrivateRoute user={user}><ActsPage user={user} /></PrivateRoute>} />
   </Routes>
    </Router>
  );
}
export default App;

вот код 
export const PrivateRoute = ({ token, children }) => {
  if (
    localStorage.getItem('token')) {
    return children
  }
  return <Navigate to='/login' />
}

Answer 1

[Михаил Р.]

https://www.robinwieruch.de/react-router-nested-routes
https://www.positronx.io/react-js-nested-routes-us...

import {BrowserRouter as Router, Routes, Route, Navigate} from 'react-router-dom';

function App() {
  const {getUser, user, setUser} = useUser();

  return (
    <Router>
      <Routes>
        <Route path="/" element={<LoginForm user={user} getUser={getUser}/>}/>
        <Route path="login" element={<LoginForm user={user} getUser={getUser}/>}/>
        <Route path="dashboard/*" element={<PrivateRoute user={user}><DashboardRoutes user={user}/></PrivateRoute>}/>
      </Routes>
    </Router>
  );
}

export default App;

const DashboardRoutes = ({user}) => (
  <Routes>
    <Route path="/" element={<Dashboard user={user}/>}/>
    <Route path="acts" element={<ActsPage user={user}/>}/>
  </Routes>
);

const PrivateRoute = ({user, children}) => {
  if(localStorage.getItem('token')) {
    return children;
  }
  return <Navigate to="/login"/>;
}

В DashboardRoutes() можно добавлять вложенные роуты.

Comments

[Yulya]

Огромное спасибо за помошь) путь меняется все переходитБ но что еще нужно изменить на кпопке что бы контент появился с нави панелью Dashboard? Вот как у меня прописано но оно появляется без Dashboard

const handleShowActsTable = () => {
    onToggleActsTable();
    if (location.pathname !== 'acts') {
      navigate('acts');
    }
  };

  const handleShowSupportPage = () => {
    onToggleSupportPage();
    if (location.pathname !== 'support') {
      navigate('support');
    }
  };
  return (
    <>
      <ListItem onClick={handleShowActsTable}>
        <ListItemButton>
          <ListItemIcon>
            <DashboardIcon />
          </ListItemIcon>
          <ListItemText primary="Акти порушень" />
        </ListItemButton>
      </ListItem>

[Михаил Р.]

Yulya,

Огромное спасибо за помошь)

Не за что, но здесь принято выражать благодарность соответствующими кнопками под ответом.

Если я правильно все понял, то у Вас в navigate не указывается родительский маршрут /dashboard, попробуйте так:

const handleShowActsTable = () => {
  onToggleActsTable();
  if(location.pathname !== '/dashboard/acts') {
    navigate('/dashboard/acts');
  }
}

const handleShowSupportPage = () => {
  onToggleSupportPage();
  if(location.pathname !== '/dashboard/support') {
    navigate('/dashboard/support');
  }
}

[Yulya]

Михаил Р., не помогло, контент все равно появляется без dashboard, в чем может быть еще проблема?

[Михаил Р.]

Yulya, вариантов множество, если Ваше приложение не сильно большое, то выложите его в какую то песочницу, чтобы пальцем в небо не тыкать.

[Yulya]

Михаил Р.,