如何使用bootstrap导航栏组件实现反应路由？

Question

嗨我是新的reactjs和我面临一些困难实施与自举导航栏路由。以下是我为示例反应应用程序创建的页面。请帮助我如何修改路径文件，以便我可以轻松地使用导航栏中的其他菜单选项。

Index.jsx

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var Route = require('./config/routes'); 
var Navbar = require('./navBar'); 

ReactDOM.render(<Navbar/>,document.getElementById('ContactForm')) 

Navbar.jsx

var React = require('react'); 
var ReactDOM = require('react-dom'); 

var NavBar = React.createClass({ 

render: function() { 

    return (
     <div className="navbar navbar-default"> 
        <div className="container"> 
         <div className="navbar-header pull-left"> 
          <ul className="nav navbar-nav"> 
           <li className="active"><a href="/">Home<span className="sr-only">(current)</span></a></li> 
          </ul> 
         </div> 

         <div className="navbar-header"> 
          <ul className="nav navbar-nav"> 
           <li><a href="/contactus">ContactUs<span className="sr-only">(current)</span></a></li> 
          </ul> 
         </div> 

         <div className="navbar-header"> 
          <ul className="nav navbar-nav"> 
           <li><a href="/products">Products<span className="sr-only">(current)</span></a></li> 
          </ul> 
         </div> 
        </div> 
     </div> 
    ) 

} 

}); 

module.exports = NavBar 

路由配置低于

var React = require('react'); 
var ReactRouter = require('react-router'); 
var Router = ReactRouter.Router; 
var Route = ReactRouter.Route; 
var IndexRoute = ReactRouter.IndexRoute; 

var Navbar = require('../navBar'); 
var Home = require('../home'); 
var Contactus = require('../contactUs'); 
var Products = require('../product'); 

var routes = (

<Router> 
    <Route path='/' component={Navbar}> 
     <Route path='/home' component={Home}/> 
     <Route path='/contactus' component={Contactus}/> 
     <Route path='/product' component={Products}/> 
    </Route> 
</Router> 

); 
module.exports = routes; 

是不同的页面（菜单林刨摆在导航栏） 家.jsx

var React = require('react'); 
var ReactDOM = require('react-dom'); 

var Home = React.createClass({ 

render: function() { 
    return (
     <div>You are in home page</div> 
    ) 
} 

}); 
module.exports = Home 

contactus.jsx

var React = require('react'); 
var ReactDOM = require('react-dom'); 

var ContactUs = React.createClass({ 

render: function() { 
    return (
     <div>You are in Contact us page</div> 
    ) 
} 

}); 
module.exports = ContactUs 

product.jsx

var React = require('react'); 
var ReactDOM = require('react-dom'); 

var Product = React.createClass({ 

render: function() { 
    return (
     <div>You are in Product page</div> 
    ) 
} 

}); 
module.exports = Product 

请人帮助我如何通过导航栏菜单正确地修改代码以路线。

Answer 1

你需要做NavBar组件的一些变化，请使用此部分：

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var ReactRouter = require('react-router'); 
var Link = ReactRouter.Link; 


var NavBar = React.createClass({ 

    render: function() { 

     return (
      <div> 
       <div className="navbar navbar-default"> 
        <div className="container"> 
         <div className="navbar-header pull-left"> 
          <ul className="nav navbar-nav"> 
           <li className="active"><Link to="/home">Home<span className="sr-only">(current)</span></Link></li> 
          </ul> 
         </div> 

         <div className="navbar-header"> 
          <ul className="nav navbar-nav"> 
           <li><Link to="/contactus">ContactUs<span className="sr-only">(current)</span></Link></li> 
          </ul> 
         </div> 

         <div className="navbar-header"> 
          <ul className="nav navbar-nav"> 
           <li><Link to="/products">Products<span className="sr-only">(current)</span></Link></li> 
          </ul> 
         </div> 
        </div> 
       </div> 
       {this.props.children} 
      </div> 
     ) 

    } 

}); 

module.exports = NavBar 

做这部分的路由：

var routes = (
    <Route path='/' component={Navbar}> 
     <Route path='/home' component={Home}/> 
     <Route path='/contactus' component={Contactus}/> 
     <Route path='/product' component={Products}/> 
    </Route> 
); 
module.exports = routes; 

导入history，你这来呈现您的路线：

var ReactRouter = require('react-router'); 
var hashHistory = ReactRouter.hashHistory; 

ReactDOM.render(
    <Router history={hashHistory}>  
     {Route}  
    </Router>, 
    document.getElementById('ContactForm') 
); 

更改：

*与react-router玩时，请始终使用Links而不是href和a标记。 （阅读a和Link之间的差异）

*您定义NavBar作为主网页（主页），和里面rendering其他components，所以你需要通过{this.props.children}

来定义你想要的地方 render这些子组件

*您呈现错误的成分，你需要返回路由部分，使用： ReactDOM.render(<Route/>,document.getElementById('ContactForm'))

*您忘了，包括历史的一部分，导入hashhistory与router使用它。

阅读路由器这些文章能帮助您：

https://css-tricks.com/learning-react-router/

https://medium.com/@dabit3/beginner-s-guide-to-react-router-53094349669#.gv7fmr3oz

https://www.themarketingtechnologist.co/react-router-an-introduction/

让我知道如果你需要任何帮助。