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

Question

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

应用程序 --左 Pane --顶部 Pane --中心面板

我的 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 组件上呈现路由而不是整个页面消失(因此我失去了我的顶部 Pane 导航栏，因为它只在 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 在 render 方法中，在这个地方子路由组件将被渲染。

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