React Router，我如何告诉路由器渲染到组件？

Question

我目前能够使用我的导航栏（TopPane 组件）使用 React 路由器版本 3.0.5 从一个页面转到另一个页面。我想要做的是拥有它，这样如果我单击顶部窗格上的某些内容，路由将呈现到中心组件而不是整个页面。这是我的层次结构的样子。

应用 --左窗格 --顶部窗格 --中心窗格

我的 routes.js 是这样的：

import React from 'react';
import { Router, Route, browserHistory } from 'react-router';

import App from './components/App.jsx';
import Models from './components/Models.jsx';
import Projects from './components/Projects.jsx';
import Contact from './components/Contact.jsx';
import About from './components/About.jsx';
import CenterPane from './components/CenterPane.jsx';

export default (
  <Router history = {browserHistory}>
    <Route path="/" component={App} />
    <Route path="/models" component={Models} />
    <Route path="/projects" component={Projects} />
    <Route path="/contact" component={Contact} />
    <Route path="/about" component={About} />
  </Router>
);

我的 App.jsx 是这样的：

import React from 'react';
import LeftPane from './LeftPane.jsx';
import RightPane from './RightPane.jsx';
import CenterPane from './CenterPane.jsx';
import TopPane from './TopPane.jsx';
import Models from './Models.jsx';
import Projects from './Projects.jsx';
import Contact from './Contact.jsx';
import Router from 'react-router';

class App extends React.Component {
  constructor() {
    super();
    this.state = { none: 'none' };
  }

  render() {
    return (
      <div>
        <div className="container-fluid">
          <div>
            <TopPane />
          </div>
          <div className="container-fluid text-center">    
            <div className="row content">
              <div className="col-sm-2 sidenav">
                <LeftPane />
              </div>
              <div className="col-sm-10 text-left"> 
                <CenterPane />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

谁能告诉我如何让 react-router 仅在 CenterPane 组件上呈现路由，而不是整个页面消失（因此我丢失了顶部窗格导航栏，因为它仅在 App.jsx 上）。

Answer 1

为此，您需要更改路由结构，您需要创建嵌套路由并让 App 成为所有的父级，这样当您在顶部面板中单击时，只会更改 App 组件的一部分，而不是整个页面。

这样定义路线：

export default (
  <Router history = {browserHistory}>
      <Route path="/" component={App}>
         <Route path="/models" component={Models} />
         <Route path="/projects" component={Projects} />
         <Route path="/contact" component={Contact} />
         <Route path="/about" component={About} />
      </Route>
  </Router>
);

在App组件内部使用this.props.children内部渲染方法，在这个地方子路由组件将被渲染。

有关react-router v3 的更多详细信息，请查看DOC。