带有反应路由器 v4/v5 的嵌套路由
[英] Nested routes with react router v4 / v5
本文介绍了带有反应路由器 v4/v5 的嵌套路由的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我目前正在努力使用 react router v4 嵌套路由.
最接近的例子是路由配置中的React-Router v4 文档.
我想将我的应用分成 2 个不同的部分.
前端和管理区域.
我正在考虑这样的事情:
<Match pattern="/home" component={HomePage}/><Match pattern="/about" component={AboutPage}/></匹配><Match pattern="/admin" component={Backend}><Match pattern="/home" component={Dashboard}/><Match pattern="/users" component={UserPage}/></匹配><Miss component={NotFoundPage}/>
前端的布局和样式与管理区域不同.所以在首页的路线回家,大约等一个应该是子路线.
/home 应该呈现在 Frontpage 组件中,而 /admin/home 应该呈现在后端组件中.
我尝试了一些变体,但最终我总是没有点击/home 或/admin/home.
编辑 - 19.04.2017
因为这个帖子现在有很多观点,所以我用最终的解决方案更新了它.我希望它可以帮助某人.
编辑 - 2017 年 5 月 8 日
删除旧的解决方案
最终解决方案:
这是我现在使用的最终解决方案.这个例子也有一个像传统 404 页面一样的全局错误组件.
import React, { Component } from 'react';从'react-router-dom'导入{开关,路由,重定向,链接};const Home = () =><div><h1>首页</h1></div>;const 用户 = () =><div><h1>用户</h1></div>;const 错误 = () =><div><h1>错误</h1></div>const 前端 = 道具 =>{console.log('前端');返回 (<div><h2>前端</h2><p><Link to="/">Root</Link></p><p><Link to="/user">User</Link></p><p><Link to="/admin">后端</Link></p><p><Link to="/the-route-is-swiggity-swoute">Swiggity swooty</Link></p><开关><路由精确路径='/' component={Home}/><Route path='/user' component={User}/><重定向到={{状态:{错误:真实}}}/></开关><footer>底部</footer>
);}const 后端 = 道具 =>{console.log('后端');返回 (<div><h2>后端</h2><p><Link to="/admin">Root</Link></p><p><Link to="/admin/user">用户</Link></p><p><Link to="/">前端</Link></p><p><Link to="/admin/the-route-is-swiggity-swoute">Swiggity swooty</Link></p><开关><路由精确路径='/admin' component={Home}/><Route path='/admin/user' component={User}/><重定向到={{状态:{错误:真实}}}/></开关><footer>底部</footer>
);}类 GlobalErrorSwitch 扩展组件 {previousLocation = this.props.locationcomponentWillUpdate(nextProps) {const { location } = this.props;if (nextProps.history.action !== 'POP'&&(!location.state || !location.state.error)) {this.previousLocation = this.props.location};}使成为() {const { location } = this.props;const isError = !!(location.state &&location.state.error &&this.previousLocation !== location//不是初始渲染)返回 (<div>{错误?<路由组件={Error}/>: <开关位置={isError ?this.previousLocation:位置}><Route path="/admin" component={Backend}/><Route path="/" component={Frontend}/></开关>}
)}}类 App 扩展组件 {使成为() {return <Route component={GlobalErrorSwitch}/>}}导出默认应用程序;
解决方案
在 react-router-v4 中,您不需要嵌套
.相反,您将它们放在另一个
中.
<小时>例如
<Route path='/topics/:topicId' component={Topic}/></路线>
应该变成
与
const 主题 = ({ match }) =>(<div><h2>主题</h2><链接到={`${match.url}/exampleTopicId`}>示例主题</链接><路由路径={`${match.path}/:topicId`} component={Topic}/>
)
<小时>
这是一个直接来自 react-router 基本示例="https://reacttraining.com/react-router/web/guides/quick-start" rel="noreferrer">文档.
I am currently struggling with nesting routes using react router v4.
The closest example was the route config in the
React-Router v4 Documentation.
I want to split my app in 2 different parts.
A frontend and an admin area.
I was thinking about something like this:
<Match pattern="/" component={Frontpage}>
<Match pattern="/home" component={HomePage} />
<Match pattern="/about" component={AboutPage} />
</Match>
<Match pattern="/admin" component={Backend}>
<Match pattern="/home" component={Dashboard} />
<Match pattern="/users" component={UserPage} />
</Match>
<Miss component={NotFoundPage} />
The frontend has a different layout and style than the admin area. So within the frontpage the route home, about and so one should be the child routes.
/home should be rendered into the Frontpage component and /admin/home should be rendered within the Backend component.
I tried some variations but I always ended in not hitting /home or /admin/home.
Edit - 19.04.2017
Because this post has a lot of views right now I updated it with the final solution. I hope it helps someone.
Edit - 08.05.2017
Removed old solutions
Final solution:
This is the final solution I am using right now. This example also has a global error component like a traditional 404 page.
import React, { Component } from 'react';
import { Switch, Route, Redirect, Link } from 'react-router-dom';
const Home = () => <div><h1>Home</h1></div>;
const User = () => <div><h1>User</h1></div>;
const Error = () => <div><h1>Error</h1></div>
const Frontend = props => {
console.log('Frontend');
return (
<div>
<h2>Frontend</h2>
<p><Link to="/">Root</Link></p>
<p><Link to="/user">User</Link></p>
<p><Link to="/admin">Backend</Link></p>
<p><Link to="/the-route-is-swiggity-swoute">Swiggity swooty</Link></p>
<Switch>
<Route exact path='/' component={Home}/>
<Route path='/user' component={User}/>
<Redirect to={{
state: { error: true }
}} />
</Switch>
<footer>Bottom</footer>
</div>
);
}
const Backend = props => {
console.log('Backend');
return (
<div>
<h2>Backend</h2>
<p><Link to="/admin">Root</Link></p>
<p><Link to="/admin/user">User</Link></p>
<p><Link to="/">Frontend</Link></p>
<p><Link to="/admin/the-route-is-swiggity-swoute">Swiggity swooty</Link></p>
<Switch>
<Route exact path='/admin' component={Home}/>
<Route path='/admin/user' component={User}/>
<Redirect to={{
state: { error: true }
}} />
</Switch>
<footer>Bottom</footer>
</div>
);
}
class GlobalErrorSwitch extends Component {
previousLocation = this.props.location
componentWillUpdate(nextProps) {
const { location } = this.props;
if (nextProps.history.action !== 'POP'
&& (!location.state || !location.state.error)) {
this.previousLocation = this.props.location
};
}
render() {
const { location } = this.props;
const isError = !!(
location.state &&
location.state.error &&
this.previousLocation !== location // not initial render
)
return (
<div>
{
isError
? <Route component={Error} />
: <Switch location={isError ? this.previousLocation : location}>
<Route path="/admin" component={Backend} />
<Route path="/" component={Frontend} />
</Switch>}
</div>
)
}
}
class App extends Component {
render() {
return <Route component={GlobalErrorSwitch} />
}
}
export default App;
解决方案
In react-router-v4 you don't nest <Routes />
. Instead, you put them inside another <Component />
.
For instance
<Route path='/topics' component={Topics}>
<Route path='/topics/:topicId' component={Topic} />
</Route>
should become
<Route path='/topics' component={Topics} />
with
const Topics = ({ match }) => (
<div>
<h2>Topics</h2>
<Link to={`${match.url}/exampleTopicId`}>
Example topic
</Link>
<Route path={`${match.path}/:topicId`} component={Topic}/>
</div>
)
Here is a basic example straight from the react-router documentation.
这篇关于带有反应路由器 v4/v5 的嵌套路由的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!