React Catch-All с отдельными страницами
Я вижу много решений о том, как создать маршрут без найденной страницы в SPA, но не могу найти ничего для SPA, который также использует отдельные страницы (например, логин).
Например:
<Router>
<Switch>
<Route path = "/login" component = {Login} />
<Route path = "/" component = {Main} />
** a catch all route wouldn't work here **
</Switch>
</Router>
Общий маршрут не будет работать выше с чем-то вроде <Route component = {NotFound} />, потому что путь будет запускаться в любом месте от path='/'. Если я переключусь на exact path='/', я не смогу получить доступ к localhost:3000/users по URL-адресу, который мне нужен, когда пользователь вошел в систему.
Main:
<Switch>
<div className = "someclass">
<Header />
<Route exact path='users' component = {Users} />
<Footer />
</div>
<Route component = {NotFound} /> . ** This also doesn't work here **
</Switch>
Ответы 1
Взгляните на приведенный ниже код, чтобы добиться желаемого результата:
<Switch>
{this.props.notLoggedIn === true
? <Route path='/' component = {LandingPage}/>
: <Dashboard />
}
<Route component = {PageNotFound}/>
</Switch>
В приведенном выше случае я показываю целевую страницу как маршрут по умолчанию, и в случае, если пользователь вошел в систему, отображается панель управления (содержит больше маршрутов). Чтобы контролировать, аутентифицирован пользователь или нет, я установил состояние auth через отправку на целевой странице, например
handleSubmit = (e) => {
e.preventDefault()
const { value} = this.state
const { dispatch } = this.props
dispatch(setAuthedUser(value))
}
После этого в моем приложении я могу получить к нему доступ и установить опору notLoggedIn. Видеть
function mapStateToProps ({ authedUser }) {
return {
notLoggedIn: authedUser === null
}
}
Если ни один маршрут не найден, отображается компонент PageNotFound.
Полный код можно найти в репо: Репо
спасибо за ответ - я не думал об этом ракурсе. Мой подход был бы чем-то вроде {notLoggedIn === true ? ( <Route path = "/" component = {Login} /> ) : ( <Main /> )}. Однако было бы неплохо перенаправить на /login, а не отображать компонент входа в систему в URL/. Другое ограничение будет заключаться в том, что если я введу URL-адрес, предназначенный для Main, который не существует, он не будет перехватывать его, если я не укажу перехват маршрута в Main, но этот компонент NotFound будет отображаться с другими компонентами, такими как боковая панель, которую я обычно не буду хотеть.
Я поддержу ваш ответ, а также отмечу как решение, если ничего другого не существует, как только у меня будет достаточно репутации. Спасибо.
Рад узнать, что это помогло тебе. Для принятия ответа не обязательно иметь репутацию. Также принятие ответов приносит + 2 репутации (stackoverflow.com/help/accepted-answer)
Также if I enter a URL intended for Main that does not exist, it will not catch it unless I specify a route catch in Main вам не придется этого делать. Коммутатор не ведет себя подобным образом .. Страница не найдена будет отображаться 1) если пользователь не вошел в систему 2) Нет совпадений маршрута, включая основной
Возможный дубликат React Router с отдельными страницами