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

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

Когда отображается файл 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;
Источник

1 ответ

Решение

Как я понимаю, ты скучаешь по {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-роутер здесь. Я надеюсь, что это поможет вам

Спасибо

Источник
Другие вопросы по тегам