Как я могу перенаправить через реагирующий маршрутизатор v4
На основе isLoggedIn мне нужно направить на разные компоненты.
Я получаю страницу входа, но не могу отобразить домашнюю страницу.
{this.state.isLoggedIn ?
(
<Route
path='/home'
render = {() => <HomePage onLogout = {this.onLogout} />}
/>
)
:
(
<Route exact path='/' component = {() => <LoginPage onLogin = {this.onLogin} />}/>
)
}
Ответы 3
Вы можете использовать this.props.history.push(myRoutes) и отправить маршрут в аргументе. Он перенаправит вас на нужный маршрут.
Вы можете перенаправить, отобразив, что <Redirect> перейдет в новое место. Новое местоположение переопределит текущее местоположение в стеке истории, как это делают перенаправления на стороне сервера (HTTP 3xx).
import { Route, Redirect } from 'react-router'
<Route exact path = "/" render = {() => (
loggedIn ? (
<Redirect to = "/dashboard"/>
) : (
<PublicHomePage/>
)
)}/>
Для передачи реквизита путем перенаправления
<Redirect to = {{
pathname: '/dashboard',
state: { id: '123' }
}} />
Затем вы можете получить доступ к реквизиту через this.props.location.state.id.
позвольте мне добавить больше примеров в ответ. @ReNinja Я добавил пример для передачи реквизита с помощью перенаправления. пожалуйста, проверьте
где я могу указать имя компонента Домашняя страница <HomePage onLogout = {this.onLogout} />
Я думаю, вы можете проверить это руководство. blog.pshrmn.com/entry/simple-react-router-v4-tutorial имеет return ( <main> <Switch> <Route path='/' component = {Home}/> <Route path='/roster' component = {Roster}/> <Route path='/roster' component = {Roster}/> <Route path='/roster' component = {Roster}/> ='/schedule' component = {Schedule}/> </Switch> </main> ); поэтому вы можете объявить компонент для маршрута и перенаправить на этот маршрут
Получение ошибки синтаксического анализа в перенаправлении Line 36: Parsing error: Unexpected token, expected "," 34 | <Redirect to = {{ 35 | pathname: '/home', > 36 | onLogout:{this.onLogout} | ^ 37 | }}/> 38 | ) : ( 39 | <LoginPage onLogin = {this.onLogin} />
Я попробовал приведенный ниже код, но домашняя страница не отображается `{this.state.isLoggedIn? (<div> <Route path='/home' render = {props=> <HomePage onLogout = {this.onLogout} />} /> </div> ) : ( <Route точно path='/' render = { props => <LoginPage className = "login-page" onLogin = {this.onLogin} />} />) }`
Использовать перенаправить
Из родительского компонента передайте this.state.isLoggedIn в качестве реквизита компонентам LoginPage и HomePage.
в компоненте LoginPage
render(){
if (this.props.isLoggedIn){
return <Redirect to='/home' />
}
return ( your login page )
}
Сделайте то же самое в компоненте HomePage, указав вместо этого путь перенаправления '/'.
Можно ли перенаправить в функции render()? И в чем разница между "<Redirect to='/home' />" и "this.props.history.push('/home');"
Извините за задержку с ответом. Да, перенаправлять в рендере нормально, потому что <Redirect /> — это компонент реакции. Различия между этими двумя здесь: stackoverflow.com/a/54452810/10104154
как я могу отправить реквизиты компонентам в этом перенаправлении