Question

我是新来的反应者，我一直在尝试寻找一个如何在SideBar组件内使用路由器的示例，因此问题是结果显示在侧边栏，而不是页面内容上。任何帮助，请！

我正在将React js与node.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>

this is the result of the code

Answer 1

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

如果您希望在侧边栏之外呈现此内容，则应将更多应用程序包装在路由器中（将其移至树中较高的位置）。然后您可以将路线放置在其中要渲染的位置。

如何使用reactjs显示从sideBar到内容组件的路由器结果？

1 个答案: