Переключение между маршрутами с использованием React-router

В настоящее время я создаю свой первый webapp, используя js-ответ и реагирую на маршрутизатор, поскольку я хотел бы разработать одностраничное приложение. Я просто делаю первый пример с реагирующим маршрутизатором и пытаюсь переключаться между двумя маршрутами, однако я не могу заставить его работать. Цель состоит в том, чтобы иметь очень простую html-страницу со списком ссылок и перекликать между представлениями.Переключение между маршрутами с использованием React-router

Когда отображается index.html, я вижу список ссылок, но когда я нажимаю на ссылку, я вижу изменение URL-адреса, однако содержимое страницы не меняется, не следует реагировать на router 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;

И my 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. Я надеюсь, что это вам поможет

Thanks

источник

2015-11-21 21:17:14

Переключение между маршрутами с использованием React-router

ответ

Смежные вопросы