如何使用ReactJS显示从侧边栏到内容组件的路由器的结果

Question

我是新手的反应，我一直在尝试找到一个如何在侧栏组件中使用路由器的示例页面的内容。请任何帮助！

我正在使用node.js

使用react js

// App.js

import 'babel-polyfill';
import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import Header from './Header';
import Content from './Content';
import SideBar from './SideBar'

export default class App extends React.Component {
  render() {
    return (
      <div>
        <Header />
        <SideBar />
      </div>
    );
  }
}

//sideBar
<li className="treeview">
  <a href="#">
    <i className="fa fa-cogs"></i>
    <span>Configuratin</span>
    <span className="pull-right-container">
      <i className="fa fa-angle-left pull-right"></i>
    </span>
  </a>
  <ul className="treeview-menu">
    <Router>
      <li>
        <Link to="/pages/charts/chartjs">Projects Setings</Link>
      </li>
      <li>
        <Link to="/conf">ReqTool Configuration</Link>
      </li>
      <Route path="/conf" component={conf} />
    </Router>
  </ul>
</li>

这是代码的结果

Answer 1

结果将显示您渲染路线的任何位置，因此，如果其在侧栏中，则可以在此渲染

如果您想在侧栏外渲染此应用程序，则应将更多的应用程序包装在路由器中(将其移动在树上更高(。然后，您可以将路线放在您希望渲染的地方。