Question

我有一个使用React Router的React应用程序，我的路由器看起来像这样：

<ConnectedRouter history={history}>
        <App>
            <Route
                exact
                name="Login"
                path="/login"
                component={Login}
            />
            <Route
                exact
                name="Home"
                path="/"
                component={Home}
            >
        </App>
</ConnectedRouter>

到目前为止一切顺利。但是，我想让应用程序能够根据路径在左侧渲染侧边栏（并非所有路径都会渲染侧边栏）。理想情况下，Route组件（例如Home）将能够指定其侧边栏组件，并且App将能够找到该组件并在适当的位置呈现它。但是App只是得到了一堆子Route组件，据我所知，没有办法确定哪些路由实际上是从App中呈现的。

据推测，我可以使用单独的Route组件来定义侧边栏组件，但我宁愿不必重复路由，这样我就可以将侧边栏与其组件相关联（例如，Home会有侧边栏，这样就可以了查看Home组件的代码，看看它的侧边栏是什么样的，而不是其他一些完全不同的文件。）

Answer 1

React路由器在根据网址将组件组合在一起方面非常强大。实际上，您可以使用一些“嵌套”路由，并且库将负责为您组合组件。

假设我们想要以下内容：

一个或多或少的没有侧栏的独立登录/注册页面
一组共享一些常见布局的产品CRUD页面，包括 Sidebar组件

要实现这一点 - 让我们考虑以下路由配置。请注意，我将使用的示例涉及 react-router 3.0.2

  <Router history={this.props.history}>
    <Route path='/' component={App}>

      //NO SIDEBAR
      <Route path='login'  component={LoginForm} />

      // STUFF WITH THE SIDEBAR
      <Route path='products' component={ProductsLayout} onEnter={this.requireAuth}>
        <Route path="new"      component={ProductForm}/>
        <Route path=":id"      component={Product}/>
        <Route path=":id/edit" component={ProductForm}/>
      </Route>
    </Route>
  </Router>

请注意，侧边栏页面的网址看起来类似于/products/new和products/123/edit，因为path属性会被子组件继承。

这是ProductLayout组件的样子。请注意，我在这里使用了一些Bootstrap组件（Row，Col） - 但是可以忽略这些组件：

import React, { Component } from 'react';
import { Row, Col }         from 'react-bootstrap';
import Sidebar              from 'components/Sidebar';

class ProductsLayout extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Row>
        <Col xs={12} sm={6} md={4} lg={3}>
          // --> THIS IS WHERE OUR SIDEBAR COMES INTO PLAY <--
          <Sidebar/>
        </Col>
        <Col xs={12} sm={6} md={8} lg={6} className="product well">
          {this.props.children}
        </Col>
        <Col xs={12} sm={0} md={0} lg={3}>
        </Col>
      </Row>
    );
  }
}

export default ProductsLayout;

结果 - 当我们去/login时 - 没有侧边栏。当我们前往任何前缀为/products的路线时 - 有一个。

希望有意义

React Router有多个可选组件

1 个答案: