2017-02-14 12 views
1

こんにちは私はreactjsと私はブートストラップnavbarでルーティングを実装するいくつかの困難に直面して新人です。以下は、サンプルの反応アプリ用に作成したページです。親切に誰も私に道のファイルを変更する方法を助けてください。そうすれば、navbarの他のメニューオプションを使って簡単に経路を決めることができます。以下ブートストラップ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; 

は異なるページ(ナビゲーションバーに入れてメニューイムプレーニング) 家です.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 

誰もが正しくナビゲーションバーのメニューをルーティングするために、コードを変更する方法を私を助けてください。

答えて

2

あなたは、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で遊ぶときは、hrefaタグの代わりにLinksを必ず使用してください。あなたは{this.props.children}

によって renderこれらの子コンポーネントにしたい場所を定義する必要がありますので、その中 renderingcomponents

ます*メインページ(ホームページ)としてNavBarを定義した(aLink間の差分を読んで)、およびあなたは間違ったコンポーネントをレンダリングしている*

は、あなたがルータの一部を返却する必要がある、これを使用する: 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/

何か助けが必要な場合は、私に教えてください。

+0

まだルーティングが機能していません。 navbarの他のメニューをクリックしている間、以下のエラーが表示されます。 – knbibin

+0

Uncaught TypeError:未定義のプロパティ 'push'を読み取ることができません Object.handleClick – knbibin

+0

は、プロジェクトのどの部分でも 'handleClick'イベントを使用していますか? –

関連する問題