Как реализовать реакцию маршрутизации с помощью компонента навигационной панели?

Question

Привет, я новичок в reactjs и Im, сталкиваясь с некоторыми трудностями при реализации маршрутизации с помощью бутстрапа navbar. Ниже приведены страницы, которые я создал для своего приложения-образца. Пожалуйста, никому, пожалуйста, помогите мне, как модифицировать файл маршрута, чтобы я мог легко перемещаться с другими параметрами меню в навигационной панели.

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; 

ниже приведены различные страницы (меню Im строгание положить в навигационной панели) дома .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 

Любой, пожалуйста, помогите мне, как изменить код, чтобы маршрут через меню NavBar правильно.

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') 
); 

Изменения:

* Всегда используйте Links вместо href и a тег при игре с react-router. (Читать различий между a и Link)

* Вы определили NavBar в качестве главной страницы (домашняя страница), и rendering другой components внутри него, так что вам нужно определить место, где вы хотите render их ребенок компонент по {this.props.children}

* вы оказываете неправильный компонент, необходимо вернуть маршрутизатор часть, используйте: 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/

Позвольте мне знать, если вам нужна помощь.