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

问题：

虽然我理解Links会绕过服务器导航并利用转换到（客户端），但在页面刷新时，我得到一个＆＃34;页面无法找到＆＃34;。

如果我在浏览器的网址输入（myexample.com/#speaker）之前手动输入哈希标记，则会显示该页面，但当然我不能指望用户这样做。
如果我必须使用哈希标记来允许客户端路由，我在哪里放置它们？我把它们放在和/或路由器中，都不起作用。
或者，我可以用丑陋的哈希标签实现总客户端路由吗？如果，那么，我该怎么办？

我更喜欢基于＃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错误

1 个答案: