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

Question

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

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

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

问题:

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

1. 如果我在浏览器的 url 输入 (myexample.com/#speaker) 之前手动放置一个井号标签，页面就会出现，但我当然不能期望用户这样做。

2. 如果我必须使用散列标签来允许客户端路由，我应该把它们放在哪里？我将它们放在和/或路由器中，但都不起作用。

3. 或者，我可以在没有丑陋的散列标签的情况下实现完整的客户端路由吗？如果是，我该怎么做？

我更喜欢基于#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')
  );

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