更改路线

时间:2017-11-10 12:15:53

标签: javascript reactjs

我是新人的反应。我刚开始学习和实施反应。在我的项目中,我在使用bootstrap时遇到问题。我正在使用bootstrap显示选择框。当我刷新页面时,选择框出现,当我更改路径时,选择框将消失。 这是代码:

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';
import './public/css/bootstrap.min.css'; 
import './public/css/bootstrap-select.min.css'; 
import './public/css/custom.css'; 
import 'jquery';
import 'bootstrap'; 
import 'bootstrap-select'; 

import App from './app/app.js';
import Dashboard from './app/Dashboard';
import RevenueReports from './app/Reports';

ReactDOM.render(

  <Router history={browserHistory}>
  <Route component={App}>
    <Route path="/dashboard" component={Dashboard} />
      <Route path="/revenue" component={RevenueReports} />
    </Route>
  </Router>,
  document.getElementById('container')
);

没有显示错误..

APP组件:

import React, {Component, PropTypes} from 'react';
import Header from './Common/header.js'
import Middle from './Common/middle.js'

export default class App extends Component {
      render() {
         return (
      <div className="main-wrapper">
        <Header/>
         <Middle location={this.props.location}>
          {this.props.children}
        </Middle>
      </div>
    );
      } 
}

边栏:

import React, {Component, PropTypes} from 'react';
import ActiveLink from "./active_links";
export default class Sidebar extends Component {
      render() {

         return (
     <aside className="main-sidebar">

          <section className="sidebar">                  

            <ul className="sidebar-menu tree" data-widget="tree">                    

              <ActiveLink to='/dashboard'>

                  <i className="icon-dashboard" />

                </ActiveLink>


               <ActiveLink to='/revenue'>

                  <i className="icon-revenue-report" />

                 </ActiveLink>

            </ul>
          </section>

        </aside>
    );
      } 
}   

1 个答案:

答案 0 :(得分:0)

使用时:

    componentDidMount(){
    $('.selectpicker').selectpicker({
  });

解决我的问题。