反应路由器导航

学习反应在这里，并试图让路线工作。这是一个非常简单的事情，只是为了感受语法等。下面的代码工作，因为我在地址栏中输入路线一和二。但我想建立一个导航栏。假设我可以简单地在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;

来源

2016-01-06 odran037

不知道这是“理想”的方式，但一直在看一个例子，我错误地进入了链接路径。

此：

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

担任应该代替它：

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

来源

2016-01-06 17:43:17 odran037

从反应路由器文档：

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

来源

2016-01-06 20:46:19 gcauchon

反应路由器导航

回答

相关问题