反应路由器导航
问题描述:
学习反应在这里,并试图让路线工作。这是一个非常简单的事情,只是为了感受语法等。下面的代码工作,因为我在地址栏中输入路线一和二。但我想建立一个导航栏。假设我可以简单地在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;
答
不知道这是“理想”的方式,但一直在看一个例子,我错误地进入了链接路径。
此:
<Link to="/#/route-one">One</a>
<Link to="/#/route-two">Two</a>
担任应该代替它:
<Link to="/route-one">One</Link>
<Link to="/route-two">Two</Link>
答
从反应路由器文档:
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}>