React-Router 1.0 - 100% 客户端路由 - 页面刷新导致 404 错误答案

【问题标题】：React-Router 1.0 - 100% Client Side Routing - Page Refresh causes 404 errorReact-Router 1.0 - 100% 客户端路由 - 页面刷新导致 404 错误
【发布时间】：2015-10-28 02:51:10
【问题描述】：

我正在为一个将严格使用客户端反应路由脚本的客户创建一个网站。

这是一个路由器的示例......

import React from 'react';
import { Route } from 'react-router';
import { generateRoute } from '../utils/localized-routes';

export default (
  <Route component={ require('../components/APP') }>
    { generateRoute({
      paths: ['/', 'audience'],
      component: require('../components/Audience')
    }) }
    { generateRoute({
      paths: ['speaker'],
      component: require('../components/Speaker')
    }) }
    { generateRoute({
      paths: ['board'],
      component: require('../components/Board')
    }) },
    { generateRoute({
      paths: ['questions'],
      component: require('../components/parts/AskQuestion')
    }) }
    <Route path="*" component={ require('../pages/NotFound') } />
  </Route>
);

这是 generateRoute 的代码：

export function generateRoute({ paths, component }) {
  return paths.map(function(path) {
    const props = { key: path, path, component };
    // Static `onEnter` is defined on
    // component, we should pass it to route props
    if (component.onEnter) props.onEnter = component.onEnter;
    return <Route {...props} />;
  });
}

问题：

虽然我知道链接将绕过服务器导航并利用转换到（客户端），但在页面刷新时，我收到“找不到页面”。

如果我在浏览器的 url 输入 (myexample.com/#speaker) 之前手动放置一个井号标签，页面就会出现，但我当然不能指望用户这样做。
如果我必须使用哈希标签来允许客户端路由，我应该把它们放在哪里？我把它们放在和/或路由器里，都不管用。
或者，我可以实现完全客户端路由而无需丑陋的哈希标签吗？如果是这样，我该怎么做？

我更喜欢基于 #3 的解决方案，但如果所有其他方法都失败了，我将采用基于 #2 的解决方案。

有什么想法吗？

提前致谢。

【问题讨论】：

标签： react-router

【解决方案1】：

我只能使用上面的第 2 步找到解决方案，并且被标签卡住了。

import React from 'react';
import ReactDOM from 'react-dom';
import Router from 'react-router';
import createHistory from 'history/lib/createHashHistory'; <-- using this
//  import createBrowserHistory from 'history/lib/createBrowserHistory';


const routerProps = {
  routes: require('./router/routes'),
  history: createHistory({            <--- added this to remove ugly querystring
    queryKey: false
  }),
  createElement: (component, props) => {
    return React.createElement(component, { ...props });
  }
};

ReactDOM.render(
    React.createElement(Router, { ...routerProps }),
    document.getElementById('root')
  );

我仍然想知道如何使用客户端路由完全删除主题标签。

【讨论】：