使用React-router在路由之間切換

我目前正在使用react js和react路由器來構建我的第一個web應用，因爲我想開發一個單頁應用。我只是做了反應路由器的第一個例子，並試圖在兩條路線之間切換，但是我無法讓它工作。目標是建立一個非常簡單的html頁面，其中包含鏈接列表並在視圖之間切換。使用React-router在路由之間切換

當index.html呈現時，我看到鏈接列表，但是當我點擊鏈接時，我看到url路徑改變，但是頁面內容沒有改變，不應該反應 - 路由器js照顧那？我錯過了什麼？

代碼如下：

我的index.html：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
<meta charset="UTF-8"> 
<title>My First Webapp With React</title> 
<link href="http://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/flatly/bootstrap.min.css" type="text/css" rel="stylesheet" /> 
<link href="assets/css/styles.css" type="text/css" rel="stylesheet" /> 
</head> 
<body> 

<div id="main" class="container"> 

    <!-- The App will be rendered here --> 

</div> 

<!-- Including the Google Maps API and the GMaps library --> 
<script src="http://maps.google.com/maps/api/js?sensor=true"></script> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.12/gmaps.min.js"></script> 

<!-- Our compiled JavaScript source file --> 
<script src="./compiled.js"></script> 

</body> 
</html>

我main.js文件：

var React = require('react'); 
var App = require('./components/App'); 
var About= require('./components/About'); 
var Router = require('react-router').Router 
var Route = require('react-router').Route 



React.render(
<Router> 
    <Route path="/" component={App}> 
    <Route path="about" component={About}/> 
    </Route> 
</Router>, 
document.getElementById('main') 
);

我app.js：

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


var App=React.createClass({ 

getInitialState:function(){ 


    return {} 

}, 
render:function(){ 


    return (<div> 
     <h1>App</h1> 
     <ul> 
      <li><Link to="/about">About</Link></li> 
      <li><Link to="/inbox">Inbox</Link></li> 
     </ul> 

    </div>) 

} 

}); 

module.exports = App;

而且我的about.js

var React=require('react'); 

var About=React.createClass({ 



render:function(){ 



    return (<div>This is the about page</div>) 

} 


}); 

module.exports=About;

來源

2015-11-21 fgonzalez

據我所知，你錯過了應用程序組件中的{this.props.children}。當您點擊鏈接時，React必須知道如何將來自反應路線的子組件傳遞給父級。而{this.props.children}就像一個巨大的小號，它有助於瞭解組件應該呈現的內容。

所以它應該是：

//App component 
    return (<div> 
     <h1>App</h1> 
     <ul> 
      <li><Link to="/about">About</Link></li> 
      <li><Link to="/inbox">Inbox</Link></li> 
     </ul> 
     {this.props.children} // missed 
    </div>)

React-router Link is here。我希望它能幫到你

謝謝

來源

2015-11-21 21:17:14

使用React-router在路由之間切換

回答

相關問題