Question

在这里学习反应并尝试让路线发挥作用。这是一个非常小的事情，只是为了感受语法等。下面的代码工作，因为我在地址栏中输入路线一和二。但我想建立一个导航栏。假设我可以简单地在App.js中添加HTML来实现这一点，我意识到使用<a href=并不是使用Link的方法。这适用于我的路线中的<Link>标签但是我想要向App.js添加导航，使用相同的Link方法不起作用。

我尝试添加：

    <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;

Answer 1

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

此：

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

应该工作，而不是：

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

Answer 2

来自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';

在根prop定义中添加路由Router：

<Router history={browserHistory}>

反应路由器导航

2 个答案: