使用 react-router 访问完整路径和重新加载页面答案

【问题标题】：make available of accessing to full path and reloading page with react-router使用 react-router 访问完整路径和重新加载页面
【发布时间】：2016-11-11 15:43:51
【问题描述】：

我在我的 react 项目中使用 react-router。这是我的 package.json：

{
  "name": "app_name",
  "version": "1.0.0",
  "description": "app on browser",
  "main": "gulpfile.js",
  "scripts": {
    "build": "gulp build",
    "start": "cordova run browser"
  },
  "author": "maki",
  "license": "ISC",
  "dependencies": {
    "babel-preset-es2015": "^6.13.2",
    "browserify": "^13.1.0",
    "gulp": "^3.9.1",
    "history": "^4.2.0",
    "material-design-icons": "^2.2.3",
    "material-ui": "^0.15.4",
    "react": "^15.3.0",
    "react-dom": "^15.3.1",
    "react-motion": "^0.4.4",
    "react-router": "^2.7.0",
    "react-swipeable-views": "^0.7.0",
    "react-tap-event-plugin": "^1.0.0",
    "vinyl-source-stream": "^1.1.0"
  },
  "devDependencies": {
    "babel-cli": "^6.11.4",
    "babel-plugin-transform-class-properties": "^6.11.5",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-1": "^6.13.0",
    "babelify": "^7.3.0",
    "gulp-sass": "^2.3.2",
    "jquery": "^3.1.0"
  }
}

我有一个像下面这样的路由器：

<Router history={browserHistory}>
  <Route path="/" component={App}>
    <IndexRoute component={HomePage}/>
    <Route path="/news" component={NewsPage}/>
      <Route path="/news/:id" components={News}/>
    <Route path="/about" component={AboutPage}/>
    <Route path="/member" component={MemberPage}/>
    <Route path="/products" component={ProductsPage}/>
    <Route path="/contact" component={ContactPage}/>
  </Route>
</Router>

这是我想要实现的目标：
1：访问IndexRoute除外。
例如）http://example.com/news/1234
2：除 IndexRoute 页面外，可重新加载。

现在，我尝试一下，我收到了这条消息：

无法获取/新闻

我该怎么办？？

【问题讨论】：

标签： reactjs routing react-router

【解决方案1】：

您需要在 gulpfile 中为 browserify 实现历史回退，类似于：

var historyApiFallback = require('connect-history-api-fallback');

// ...
browserSync({
  server: {
    baseDir: './',
    middleware: [historyApiFallback()],
  },
});

【讨论】：

但是，当我这样做时，我收到一条错误消息：“Cannot GET /”
检查baseDir是否是你的index.html所在的路径。