关于重定向到当前路由的 React 路由器错误。不确定如何正确构建路由
React router error about redirecting to the current route. Unsure how to properly structure routes
我有一个 repo 来重现这个并看到错误:https://github.com/rublev/parcel-static1/tree/master
我的路由基本结构如下:
// app/app.js
const render = Component => {
ReactDOM.render(
<AppContainer>
<Provider store={ store }>
<ConnectedRouter history={ history }>
<Route component={ Component } />
</ConnectedRouter>
</Provider>
</AppContainer>,
document.getElementById('react-root')
)
}
// app/containers/App/index.js
<div className='app'>
<Switch location={ location }>
<Route exact path='/' render={() => (
loggedIn ? (
<Redirect to='/organizations' push />
) : (
<Redirect to='/onboarding' push />
)
)}/>
<Route path='/organizations' component={ Organizations } />
<Route path='/onboarding' component={ Onboarding } />
<Route path='/settings' component={ Settings } />
</Switch>
</div>
// app/flows/onboarding/Onboarding/index.js
<div>
<Route exact path={`${match.url}`} component={ Start }/>
<Route path={`${match.url}/signup`} component={ SignUp }/>
<Route path={`${match.url}/name`} component={ Name }/>
<Route path={`${match.url}/structure`} component={ Structure }/>
<Route path={`${match.url}/pricing`} component={ Pricing }/>
<Route path={`${match.url}/continue`} component={ Continue }/>
</div>
// app/flows/onboarding/Start/index.js
<div className='start'>
Start Page
</div>
我不确定错误可能来自何处或如何做到这一点。
我主要有3条路线:
- /入职
- /组织
- /设置
我想根据登录状态重定向到 /onboarding
或 /settings
。一旦到达这些主要路线中的任何一条,就会有子路线。
在不导致重定向错误的情况下使用重定向设置这些路由的正确方法是什么?
启动时出错 localhost:8080/
:
在您的渲染函数中,更改
<Route component={ Component } />
到
<Component />
此外,您不需要将 location
作为道具传递到 App
中的 Switch
。
我有一个 repo 来重现这个并看到错误:https://github.com/rublev/parcel-static1/tree/master
我的路由基本结构如下:
// app/app.js
const render = Component => {
ReactDOM.render(
<AppContainer>
<Provider store={ store }>
<ConnectedRouter history={ history }>
<Route component={ Component } />
</ConnectedRouter>
</Provider>
</AppContainer>,
document.getElementById('react-root')
)
}
// app/containers/App/index.js
<div className='app'>
<Switch location={ location }>
<Route exact path='/' render={() => (
loggedIn ? (
<Redirect to='/organizations' push />
) : (
<Redirect to='/onboarding' push />
)
)}/>
<Route path='/organizations' component={ Organizations } />
<Route path='/onboarding' component={ Onboarding } />
<Route path='/settings' component={ Settings } />
</Switch>
</div>
// app/flows/onboarding/Onboarding/index.js
<div>
<Route exact path={`${match.url}`} component={ Start }/>
<Route path={`${match.url}/signup`} component={ SignUp }/>
<Route path={`${match.url}/name`} component={ Name }/>
<Route path={`${match.url}/structure`} component={ Structure }/>
<Route path={`${match.url}/pricing`} component={ Pricing }/>
<Route path={`${match.url}/continue`} component={ Continue }/>
</div>
// app/flows/onboarding/Start/index.js
<div className='start'>
Start Page
</div>
我不确定错误可能来自何处或如何做到这一点。
我主要有3条路线:
- /入职
- /组织
- /设置
我想根据登录状态重定向到 /onboarding
或 /settings
。一旦到达这些主要路线中的任何一条,就会有子路线。
在不导致重定向错误的情况下使用重定向设置这些路由的正确方法是什么?
启动时出错 localhost:8080/
:
在您的渲染函数中,更改
<Route component={ Component } />
到
<Component />
此外,您不需要将 location
作为道具传递到 App
中的 Switch
。