使用 React-router 在路由之间切换答案

【问题标题】：Switching between routes using React-router使用 React-router 在路由之间切换
【发布时间】：2015-11-21 21:08:04
【问题描述】：

我目前正在使用 react js 和 react router 构建我的第一个 web 应用程序，因为我想开发一个单页应用程序。我只是用反应路由器做第一个例子，并试图在两条路由之间切换，但是我无法让它工作。目标是拥有一个非常简单的 html 页面，其中包含链接列表并在视图之间切换。

渲染 index.html 时，我看到了链接列表，但是当我点击链接时，我看到 url 路径发生了变化，但是页面的内容没有改变，react-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;

还有我的 about.js

var React=require('react');

var About=React.createClass({



render:function(){



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

}


});

module.exports=About;

【问题讨论】：

标签： javascript jquery reactjs react-router react-routing

【解决方案1】：

据我了解，您错过了 App 组件中的 {this.props.children}。当您单击链接时，React 必须知道如何将来自 react-route 以处理特定路由的子组件传递给父组件的方式。而 {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。希望对你有帮助

谢谢

【讨论】：