反应路由器导航

Question

Learning React here and trying to get routes to work. This is an extremely minimal thing just to get a feel for the syntax and etc. The code below works as I enter the route one and two in the address bar. But I wanted to build a navigation bar. Assuming I could simply add HTML in App.js to accomplish this, I was made aware that using <a href= is not the way to go and use Link instead. That works fine with the <Link> tags inside my routes but say I wanted to add a nav to App.js, using the same Link method does not work.

I tried adding:

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

But 'One' and 'Two' are not links. Though in the browser console I am seeing:

TypeError: this.context.history is undefined

I asked the instructor but he did not want to help.

See the code I currently have below;

This is the App.js file:

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

This is the 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;

This is 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

Not sure if this is the "ideal" way but having been looking at an example, I was entering the link path incorrectly.

This:

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

worked as it should instead of:

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

Answer 2

From the react-router documentation:

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

React Router is built with history . In a nutshell, a history knows how to listen to the browser's address bar for changes and parses the URL into a location object that the router can use to match routes and render the correct set of components.

Add one of the default implementation in your import line:

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

Add the route prop on your root Router definition:

<Router history={browserHistory}>