Я пытаюсь создать веб-сайт с целевой страницей (логин) без заголовка, но как только пользователь вошел в систему, все последующие страницы будут иметь заголовок. Я пробовал следующее, но синтаксис неверен и поэтому не работает. Пожалуйста, может кто-нибудь посоветовать?
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Login from '..path for landing';
import component1 from '..path for component1';
import component2 from '..path for component2';
const App = () => {
return (
<Router>
<Routes>
<Route exact path = "/" element = {<Login />} />
<Header />
<Route path = "/component1" element = {<component1 />} />
<Route path = "/component2" element = {<component2 />} />
</Routes>
</Router>
);
}
...
<Route exact path = "/" element = {<Login />} />
<Route
render = {({ location }) => ['/', '/login'].includes(location.pathname)
? null
: <Header/>
}
/>
<Route exact path = "/" element = {<Login />} />
...
Создайте компонент макета, который отображает компонент Header
и компонент Outlet
для вложенных маршрутов, в которые будут отображаться.
Пример:
import { Outlet } from 'react-router-dom';
const AuthLayout = () => {
// ... perhaps some authentication logic to protect routes?
return (
<>
<Header />
<Outlet />
</>
);
};
...
const App = () => {
return (
<Router>
<Routes>
<Route path = "/" element = {<Login />} />
<Route element = {<AuthLayout />}>
<Route path = "/component1" element = {<component1 />} />
<Route path = "/component2" element = {<component2 />} />
</Route>
</Routes>
</Router>
);
}
Можем ли мы это сделать?
<div>{isLogged && <Header/>}</div>