反应路由器导航答案

【问题标题】：React Router Navigation反应路由器导航
【发布时间】：2016-04-10 21:31:24
【问题描述】：

在这里学习 React 并尝试获取工作路线。这是一个非常简单的事情，只是为了了解语法等。下面的代码在我在地址栏中输入路线一和二时起作用。但我想建立一个导航栏。假设我可以简单地在 App.js 中添加 HTML 来完成此操作，我意识到使用 <a href= 不是使用 Link 的方法。这适用于我的路线中的<Link> 标签，但说我想向 App.js 添加一个导航，使用相同的链接方法不起作用。

我尝试添加：

    <h1>
      <Link to="/route-one">One</Link>
      | 
      <Link to="/route-two">Two</Link>
    </h1>
    <hr />
    <Router>
    ...

但“一”和“二”不是链接。虽然在浏览器控制台中我看到：

TypeError: this.context.history is undefined

我问过导师，但他不想帮忙。

请看下面我目前拥有的代码；

这是 App.js 文件：

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute } from 'react-router';
import RouteOne from './RouteOne.js';
import RouteTwo from './RouteTwo.js';
import { Link } from 'react-router';

const App = React.createClass({
    render() {
        return (
            <div>
                <Router>
                    <Route path="route-one" component={RouteOne} />
                    <Route path="route-two" component={RouteTwo} />
                </Router>
            </div>
        )
    }
});

ReactDOM.render(<App />, document.getElementById("app"));

这是 RouteOne.js：

import React from 'react';
import { Link } from 'react-router';

var RouteOne = React.createClass({
  render() {
    return (
      <div>
        <h2>Route One</h2>
        <Link to="/route-two">
            <h3>Switch Route</h3>
        </Link>
      </div>
    )
  }
});

export default RouteOne;

这是 RouteTwo.js：

import React from 'react';
import { Link } from 'react-router';

var RouteTwo = React.createClass({
  render() {
    return (
      <div>
        <h2>Route Two</h2>
        <Link to="/route-one">
          <h3>Switch Route</h3>
        </Link>
      </div>
    )
  }
});

export default RouteTwo;

【问题讨论】：

标签： javascript html reactjs react-router react-jsx

【解决方案1】：

来自 react-router 文档：

https://github.com/rackt/react-router/blob/latest/docs/guides/basics/Histories.md

React Router 是使用 history 构建的。简而言之，历史知道如何监听浏览器地址栏的变化，并将 URL 解析为位置对象，路由器可以使用该对象来匹配路由并呈现正确的组件集。

在import 行中添加一个默认实现：

import { Router, Route, IndexRoute, browserHistory } from 'react-router';

在你的根Router定义上添加路由prop：

<Router history={browserHistory}>

【讨论】：

【解决方案2】：

不确定这是否是“理想”方式，但一直在查看示例，我输入的链接路径不正确。

这个：

<Link to="/#/route-one">One</a>
<Link to="/#/route-two">Two</a>

按应有的方式工作，而不是：

<Link to="/route-one">One</Link>
<Link to="/route-two">Two</Link>

【讨论】：