React Router browserHistory 未按预期工作
React Router browserHistory not working as expected
作为用户,我想通过直接深入访问内容 url
情况
在主页上我有一个 link 到 "about" 页面。单击内容按预期更改。
页面被加载并且 url 更改为 localhost:8080/about.
如果我现在刷新页面,我会收到错误消息:
Cannot GET /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 = (
<Router history={browserHistory} >
<Route path="/" component={Main}>
<Route path="about" component={About}/>
</Route>
</Router>
)
主要:
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
时,您必须适当地配置服务器以在所有路由路径上提供服务。有关详细信息,请参阅 this。
我有同样的问题。所以正如上面@taion 的回答告诉我们需要配置 express server 以在路由中使用 URLs 进行热重载。
但是,如果您不想额外放置 express 服务器来进行热重载,请将其用于 运行 您的项目。
webpack-dev-server -d --history-api-fallback --hot --inline --progress --colors
早些时候,我只使用这个需要配置快速服务器
webpack-dev-server --hot --inline
注意:但我仍然认为,您在部署时需要为 nginx 配置。我告诉的上述命令仅用于开发目的。
所以不要忘记按照@taion 所说的那样查看 this。
如果您使用 gulp-server-livereload,只需添加 fallback
属性 指向您的索引
gulp.src(['dist'])
.pipe(livereload({
livereload: true,
defaultFile: 'index.html',
fallback: 'index.html',
log: 'debug'
}))
如果您只使用 nginx 服务您的 React 应用程序,您需要为 /
位置添加此代码,如下所示:
location / {
try_files $uri $uri/ /index.html =404;
}
就这些了。
作为用户,我想通过直接深入访问内容 url
情况
在主页上我有一个 link 到 "about" 页面。单击内容按预期更改。 页面被加载并且 url 更改为 localhost:8080/about.
如果我现在刷新页面,我会收到错误消息:
Cannot GET /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 = (
<Router history={browserHistory} >
<Route path="/" component={Main}>
<Route path="about" component={About}/>
</Route>
</Router>
)
主要:
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
时,您必须适当地配置服务器以在所有路由路径上提供服务。有关详细信息,请参阅 this。
我有同样的问题。所以正如上面@taion 的回答告诉我们需要配置 express server 以在路由中使用 URLs 进行热重载。
但是,如果您不想额外放置 express 服务器来进行热重载,请将其用于 运行 您的项目。
webpack-dev-server -d --history-api-fallback --hot --inline --progress --colors
早些时候,我只使用这个需要配置快速服务器
webpack-dev-server --hot --inline
注意:但我仍然认为,您在部署时需要为 nginx 配置。我告诉的上述命令仅用于开发目的。 所以不要忘记按照@taion 所说的那样查看 this。
如果您使用 gulp-server-livereload,只需添加 fallback
属性 指向您的索引
gulp.src(['dist'])
.pipe(livereload({
livereload: true,
defaultFile: 'index.html',
fallback: 'index.html',
log: 'debug'
}))
如果您只使用 nginx 服务您的 React 应用程序,您需要为 /
位置添加此代码,如下所示:
location / {
try_files $uri $uri/ /index.html =404;
}
就这些了。