React Router浏览器历史记录无法正常工作

本文介绍了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:

无法获取/ about

Cannot GET /about

我想知道这是否是正常行为还是我错过了什么？

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.