问题描述
作为用户,我想通过直接访问深层网址来访问内容
情况
在主页上,我有一个指向关于"页面的链接.单击内容更改按预期方式.页面被加载并且 url 更改为 localhost:8080/about.
如果我现在刷新页面,我会收到错误:
无法获取/about
我想知道这是正常行为还是我错过了什么?
路线:
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 = (<路由器历史={browserHistory} ><Route path="/" component={Main}><Route path="about" component={About}/></路线></路由器>)
主要内容:
var React = require('react');var ReactRouter = require('react-router');var Link = ReactRouter.Link;module.exports = React.createClass({渲染:函数(){返回 <div>标题!!</div>{this.content()}},内容:函数(){如果(this.props.children){返回 this.props.children} 别的 {返回 (<div><h1>主要</h1><Link to={'about'}>To about</Link></div>)}}});
关于:
var React = require('react');module.exports = React.createClass({渲染:函数(){返回(关于)}});
还有我的 package.json
{"name": "反应启动器",版本":1.0.0","main": "index.js",脚本":{"test": "echo "Error: no test specified" && exit 1"},作者": "","许可证": "ISC",依赖关系":{"浏览": "^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",节点通知程序":^4.4.0",反应":^0.14.6","react-dom": "^0.14.6",反应路由器":^ 2.0.0-rc5","reactify": "^1.1.1","vinyl-source-stream": "^1.1.0",观察":^3.7.0"},devDependencies":{}}
在使用 browserHistory
时,您必须适当地配置您的服务器以在所有路由路径上提供服务.请参阅 这个详情.
As a User i want to access content via going direkt on an deep url
Situation
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?
Routes:
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>)
}
}
});
About:
var React = require('react');
module.exports = React.createClass({
render: function() {
return (<div>About</div>)
}
});
And my 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": {}
}
When using browserHistory
, you must configure your server appropriately to serve at all routed paths. See this for details.
这篇关于React Router browserHistory 没有按预期工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!