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 。