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

Question

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

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

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} />;
  });
}

问题：

虽然我知道链接将绕过服务器导航并利用转换到（客户端），但在页面刷新时，我得到 "Page Cannot Be found"。

如果我在浏览器的url输入前手动放置一个井号标签（myexample.com/#speaker），页面就会出现，但当然我不能指望用户这样做。
如果我必须使用散列标签来允许客户端路由，我应该把它们放在哪里？我把它们放在 and/or 路由器里，都没用。
或者，我能否实现完全客户端路由 w/o 丑陋的散列标签？如果可以，我该怎么做？

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

有什么想法吗？

提前致谢。

Answer 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')
  );

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

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

React-Router 1.0 - 100% Client Side Routing - Page Refresh causes 404 error

react-router