- 首页
- 其他开发
- 将 React-Router 与布局页面或每页多个组件一起使用
将 React-Router 与布局页面或每页多个组件一起使用
[英] Using React-Router with a layout page or multiple components per page
本文介绍了将 React-Router 与布局页面或每页多个组件一起使用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在向现有项目添加反应路由器.
目前一个模型被传递给一个根组件，该根组件包含一个用于子导航的导航组件和一个主组件.
我发现反应路由器的示例只有一个子组件，在不重复两个子组件的布局代码的情况下更改多个子组件的最佳方法是什么?
解决方案
如果我理解正确的话，为了实现这一点，您将在 Route 中定义多个组件.你可以像这样使用它:
//在路由器的上下文之外考虑它，如果你有可插拔的//你的 `render` 的一部分，你可以这样做<App children={{main: <Users/>, sidebar: <UsersSidebar/>}}/>//所以路由器看起来像这样:const 路由 = (<路由组件={App}><Route path="groups" components={{main: Groups, sidebar: GroupsSidebar}}/><Route path="users" components={{main: Users, sidebar: UsersSidebar}}><Route path="users/:userId" component={Profile}/></路线></路线>)类 App 扩展了 React.Component {使成为 () {const { main, sidebar } = this.props;返回 (<div><div className="Main">{主要的}
<div className="侧边栏">{边栏}
)}}类用户扩展 React.Component {使成为 () {返回 (<div>{/* 如果在/users/123"，`children` 将是 ;*/}{/* UsersSidebar 也将获得 <Profile>作为 this.props.children，所以它有点奇怪，但你可以决定哪个想要继续嵌套 */}{this.props.children}
)}}
另请查看边栏示例应用，应该能帮到你更多.
根据@Luiz 的评论:
<块引用>
在最新版本的路由器 (v3) 中，组件位于 props 对象的根目录中
所以:
const { main, sidebar } = this.props.children;
变成:
const { main, sidebar } = this.props;
<小时>
在 react-router v4 中，这可以像(根据 新文档中提供的示例)来完成):
从'react'导入React进口 {BrowserRouter 作为路由器，路线，关联来自'反应路由器-dom'//每个逻辑路由"有两个组件，一个用于//侧边栏和一个主区域.我们想//在不同的地方渲染它们//路径匹配当前 URL.const 路由 = [{ 小路: '/'，准确:真实，侧边栏:() =><div>家！</div>,主要: () =><h2>家</h2>},{路径:'/泡泡糖'，侧边栏:() =><div>泡泡糖！</div>,主要: () =><h2>泡泡糖</h2>},{路径:'/鞋带'，侧边栏:() =><div>鞋带！</div>,主要: () =><h2>鞋带</h2>}]const SidebarExample = () =>(<路由器><div style={{ display: 'flex' }}><div 样式={{填充:'10px'，宽度: '40%',背景:'#f0f0f0'}}><ul style={{ listStyleType: 'none', padding: 0 }}><li><Link to="/">首页</Link></li><li><Link to="/bubblegum">Bubblegum</Link></li><li><Link to="/shoelaces">鞋带</Link></li>{routes.map((route, index) => (//你可以渲染一个 <Route>在尽可能多的地方//在你的应用中如你所愿.它将沿渲染//与任何其他也匹配 URL 的 .//所以，侧边栏或面包屑或其他任何东西//这需要你渲染多个东西//在同一个 URL 的多个地方什么都不是//多个.<路线键={索引}路径={route.path}精确={route.exact}组件={route.sidebar}/>))}
<div style={{ flex: 1, padding: '10px' }}>{routes.map((route, index) => (//渲染更多具有相同路径的 <Route>s//上面，但这次是不同的组件.<路线键={索引}路径={route.path}精确={route.exact}组件={route.main}/>))}
</路由器>)导出默认侧边栏示例
请务必在此处查看新的 React Router v4 文档:https://reacttraining.com/react-路由器/
I am adding react router to an existing project.
At present a model is passed in to a root component which contains a navigation component for the sub navigation and a main component.
The examples of react router I've found only have one child component, what is the best way to have multiple child components change without repeating the layout code in both?
解决方案
If I understood you correctly, to achieve that you would define multiple components in your Route. You can use it like:
// think of it outside the context of the router, if you had pluggable
// portions of your `render`, you might do it like this
<App children={{main: <Users/>, sidebar: <UsersSidebar/>}}/>
// So with the router it looks like this:
const routes = (
<Route component={App}>
<Route path="groups" components={{main: Groups, sidebar: GroupsSidebar}}/>
<Route path="users" components={{main: Users, sidebar: UsersSidebar}}>
<Route path="users/:userId" component={Profile}/>
</Route>
</Route>
)
class App extends React.Component {
render () {
const { main, sidebar } = this.props;
return (
<div>
<div className="Main">
{main}
</div>
<div className="Sidebar">
{sidebar}
</div>
</div>
)
}
}
class Users extends React.Component {
render () {
return (
<div>
{/* if at "/users/123" `children` will be <Profile> */}
{/* UsersSidebar will also get <Profile> as this.props.children,
so its a little weird, but you can decide which one wants
to continue with the nesting */}
{this.props.children}
</div>
)
}
}
Also check out the sidebar example app, should help you more.
Edit:
As per @Luiz's comment:
In the latest version of router (v3) the components are in the root of the props object
So:
const { main, sidebar } = this.props.children;
becomes:
const { main, sidebar } = this.props;
EDIT:
In the react-router v4 this can be accomplished like (as per the example provided in the new docs):
import React from 'react'
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom'
// Each logical "route" has two components, one for
// the sidebar and one for the main area. We want to
// render both of them in different places when the
// path matches the current URL.
const routes = [
{ path: '/',
exact: true,
sidebar: () => <div>home!</div>,
main: () => <h2>Home</h2>
},
{ path: '/bubblegum',
sidebar: () => <div>bubblegum!</div>,
main: () => <h2>Bubblegum</h2>
},
{ path: '/shoelaces',
sidebar: () => <div>shoelaces!</div>,
main: () => <h2>Shoelaces</h2>
}
]
const SidebarExample = () => (
<Router>
<div style={{ display: 'flex' }}>
<div style={{
padding: '10px',
width: '40%',
background: '#f0f0f0'
}}>
<ul style={{ listStyleType: 'none', padding: 0 }}>
<li><Link to="/">Home</Link></li>
<li><Link to="/bubblegum">Bubblegum</Link></li>
<li><Link to="/shoelaces">Shoelaces</Link></li>
</ul>
{routes.map((route, index) => (
// You can render a <Route> in as many places
// as you want in your app. It will render along
// with any other <Route>s that also match the URL.
// So, a sidebar or breadcrumbs or anything else
// that requires you to render multiple things
// in multiple places at the same URL is nothing
// more than multiple <Route>s.
<Route
key={index}
path={route.path}
exact={route.exact}
component={route.sidebar}
/>
))}
</div>
<div style={{ flex: 1, padding: '10px' }}>
{routes.map((route, index) => (
// Render more <Route>s with the same paths as
// above, but different components this time.
<Route
key={index}
path={route.path}
exact={route.exact}
component={route.main}
/>
))}
</div>
</div>
</Router>
)
export default SidebarExample
Make sure you check out the new React Router v4 docs here: https://reacttraining.com/react-router/
这篇关于将 React-Router 与布局页面或每页多个组件一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
