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

Question

目前，我可以使用React Router 3.0.5版使用导航栏（TopPane组件）在页面之间切换。 我想要做的就是拥有它，这样，如果我在顶部窗格中单击某些内容，则路由将呈现到中心组件而不是整个页面。 这是我的层次结构。

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

我的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组件内部，在render方法中使用this.props.children ，在该位置将渲染子路由组件。

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