使用React-Router和布局页面或每页多个组件
我正在添加反应路由器到现有的项目。
目前，一个模型被传递给一个根组件，该组件包含一个用于子导航的导航组件和一个主要组件。
我发现的反应路由器的例子只有一个子组件，有多个子组件改变而不重复布局代码的最好方法是什么？
如果我正确地理解了你，为了达到这个目的，你需要在你的Route定义多个组件。 你可以像这样使用它：
// 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> ) } }
另外检查侧边栏示例应用程序 ，应该帮助你更多。
编辑：根据@路易斯的评论：
在最新版本的路由器（v3）中，组件位于道具对象的根目录中
所以：
const { main, sidebar } = this.props.children;
变为：
const { main, sidebar } = this.props;
编辑：在反应路由器v4这可以完成像（根据新的文档中提供的示例）：
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
确保你在这里查看新的React Router v4文档： https ： //reacttraining.com/react-router/
该组件可以是一个返回JSX的函数。
<Route> <Route path="/" component={App}> <IndexRoute component={Home} /> <Route path="Invite" component={()=>(<div><Home/><Invite/></div>)} /> </Route> </Route>
