本文介绍了React Router浏览器历史记录无法正常工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
作为用户,我想通过直接访问深层网址来访问内容
As a User i want to access content via going direkt on an deep url
情况
打开主页上有指向关于页面的链接。单击内容更改按预期的方式。
页面被加载,URL更改为localhost:8080 / about。
On the Main Page i have a link to "about" page. clicking on the the Content changes as expected.The Page gets loaded and the url changes to localhost:8080/about.
如果现在刷新页面,我会得到错误:
If I now refresh the Page i get the error:
我想知道这是否是正常行为还是我错过了什么?
I wonder if this is the normal behavior or did I miss something out?
路线:
var React = require('react');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var browserHistory = ReactRouter.browserHistory;
var Main = require('./components/Main');
var About = require('./components/About');
module.exports = (
<Router history={browserHistory} >
<Route path="/" component={Main}>
<Route path="about" component={About}/>
</Route>
</Router>
)
Main:
var React = require('react');
var ReactRouter = require('react-router');
var Link = ReactRouter.Link;
module.exports = React.createClass({
render: function() {
return <div>
<div>Header!!</div>
{this.content()}
</div>
},
content: function() {
if(this.props.children) {
return this.props.children
} else {
return (
<div>
<h1>Main</h1>
<Link to={'about'}>To about</Link>
</div>)
}
}
});
关于:
var React = require('react');
module.exports = React.createClass({
render: function() {
return (<div>About</div>)
}
});
还有我的 package.json
{
"name": "react-starter",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"browserify": "^13.0.0",
"gulp": "^3.9.0 ",
"gulp-concat": "^2.6.0",
"gulp-react": "^3.1.0",
"gulp-sass": "^2.1.1",
"gulp-server-livereload": "1.6.2",
"gulp-util": "^3.0.7",
"gulp-watch": "^4.3.5",
"node-notifier": "^4.4.0",
"react": "^0.14.6",
"react-dom": "^0.14.6",
"react-router": "^2.0.0-rc5",
"reactify": "^1.1.1",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.7.0"
},
"devDependencies": {}
}
推荐答案
在使用 browserHistory
时,必须适当配置服务器以在所有路由路径中使用。参见了解详情。
When using browserHistory
, you must configure your server appropriately to serve at all routed paths. See this for details.
这篇关于React Router浏览器历史记录无法正常工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!