React Router Navigation

Question

Изучение React здесь и попытка получить маршруты для работы. Это крайне минимальная вещь, чтобы понять синтаксис и т. Д. Код ниже работает, когда я вхожу в маршрут один и два в адресной строке. Но я хотел создать панель навигации. Предполагая, что я могу просто добавить HTML в App.js для этого, мне стало известно, что использование <a href= - это не путь, а использование вместо него. Это хорошо работает с тегами <Link> внутри моих маршрутов, но я сказал, что хочу добавить nav в 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

Из документации реагировать маршрутизаторами:

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

Реагировать маршрутизатор построен с history. В двух словах история знает, как прослушивать адресную строку браузера для изменений и анализирует URL-адрес в объекте местоположения, который маршрутизатор может использовать для соответствия маршрутам и отображать правильный набор компонентов.

Добавьте одну реализацию по умолчанию в вашей import линии:

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

Добавить маршрут prop на корне Router определение:

<Router history={browserHistory}>