Реагировать на точный путь в Route не работает должным образом
Привет, у меня есть приложение для реагирования со страницей входа и главной страницей с маршрутами. У меня проблемы с пониманием того, как путь и точный путь на самом деле работают с реагирующим маршрутизатором в такой ситуации?
Вот мой код компонента App:
const PrivateRoute = ({ component: Component , ...rest }) => {
const { userAuth, getUser } = useContext(AuthContext);
return (
<Route
{...rest}
render = {props => !userAuth ? <Redirect to='/login' /> : <Component {...props} />}
/>
)
}
function App(props) {
return (
<AuthState>
<Switch>
<Route path='/login' component = {SignIn} />
<PrivateRoute exact path='/' component = {MainPage} /> !!! // When i switch this to path only it works fine
</Switch>
</AuthState>
);
}
export default App;
А вот часть кода компонента main:
<main className = {classes.content}>
<div className = {classes.toolbar} />
<Switch>
<Route path='/dataSets' component = {DataSet} />
<Route path='/dasboard' component = {Dashboardmain} />
<Redirect from='/' to='/dasboard' />
</Switch>
</main>
</div>
Поэтому, когда я устанавливаю так:
<PrivateRoute exact path='/' component = {MainPage} />
Маршруты /dasboard и dataSets не отрисовываются, просто изменены URL-ы
Но если я настрою так:
<PrivateRoute path='/' component = {MainPage} />
Все работает нормально.
Любая помощь в понимании такого поведения?
Ответы 2
Попробуйте так в своем App.js
<Router>
<Route path = "/login" component = {MyLoginForm} />
<PrivateRoute path = "/onlyAuthorizedAllowedHere/" component = {MyComponent} />
</Router>
И компонент PrivateRoute
import React from 'react'
import AuthService from './Services/AuthService'
import { Redirect, Route } from 'react-router-dom'
const PrivateRoute = ({ component: Component, ...rest }) => {
// Add your own authentication on the below line.
const isLoggedIn = AuthService.isLoggedIn()
return (
<Route
{...rest}
render = {props =>
isLoggedIn ? (
<Component {...props} />
) : (
<Redirect to = {{ pathname: '/login', state: { from: props.location } }} />
)
}
/>
)
}
export default PrivateRoute
exact — очень полезная подсказка, если вы ее понимаете. Базовый вы можете понять это так:
Давайте использовать
exact, когда вы хотите, чтобы пользователь перешел именно по тому маршруту (URL), который вам нужен. Если этот маршрут является родительским и у него есть несколько дочерних маршрутов, не используйтеexactс родительским маршрутом, вместо этого используйте его для дочерних маршрутов.
В вашем примере мы можем понять так
Помните, что у нас всегда есть родитель маршрута
/Loginявляется потомком/, он не содержит дочернего маршрута =>, поэтому давайте добавимexactдля этого маршрутаMainPageтакже является дочерним элементом/, но является родителемDashboardmainиDataSet, поэтому НЕ добавляйтеexactвместо/DashboardmainиDataSetявляются потомками/, но они не содержат дочернего маршрута =>, поэтому давайте добавим для нихexact
Та же логика с вложенными маршрутами. Вы можете создать несколько вложенных маршрутов с моим объяснением выше. Удачи!
Привет, я решил твою проблему?? Если да, пожалуйста, примите