可以用 browserHistory 反应单页应用程序吗？

Question

我一直在使用来自 react-router 的 hashHistory 构建一个反应单页应用程序，并且一切正常，直到我决定删除 URL 中的尾随代码，如下所示：#/?_k=ncbx6v。

我遇到的推荐解决方案是转换到 browserHistory，但我注意到所有示例和解决方案都需要使用 webpack-dev-server 并将 history-api-fallback 设置为 true。我尝试了这种方法并且它有效（通过localhost），但是曾经有效的独立 bundle.js 文件 + index.html 不再有效。

当我运行 webpack 并打开 html 文件时，我在控制台中收到此错误： Warning: [react-router] Location "/Users/mike/project/index.html" did not match any routes

我不熟悉问题背后的机制，但我很好奇是否有我不熟悉的解决方案。

这是我的 webpack 文件：

const {resolve} = require('path')

module.exports = () => {
  return {
    context: resolve('src'),
    entry: './app',
    output: {
      path: resolve('public'),
      filename: 'bundle.js',
      publicPath: '/public/'
    },
    resolve: {
      extensions: ['.js', '.jsx', '.json']
    },
    stats: {
      colors: true,
      reasons: true,
      chunks: false
    },
    module: {
      rules: [
        {enforce: 'pre', test: /\.jsx?$/, loader: 'eslint-loader', exclude: [/node_modules/]},
        {test: /\.jsx?$/,loader: 'babel-loader', include: /src/, exclude: /node_modules/
        },
        {test: /\.json$/, loader: 'json-loader'},
        {test: /(\.css)$/, loaders: ['style-loader', 'css-loader']},
        {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader"},
        {test: /\.(woff|woff2)$/, loader: "url-loader?prefix=font/&limit=5000"},
        {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream"},
        {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml"}
      ]
    }
  }
}

这是我的 app.js：

'use strict'
import React from 'react'
import ReactDOM from 'react-dom'
import Layout from './components/common/Layout'
import { Router, Route, IndexRoute, browserHistory } from 'react-router'
import configureStore from './store/configureStore'
import { Provider } from 'react-redux'

const store = configureStore()

class App extends React.Component {
  render () {
    return (
      <Provider store={store}>
        <Router history={browserHistory}>
          <Route path='/' component={Layout}></Route>
        </Router>
      </Provider>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'))

Answer 1

为了使用浏览器历史记录，您需要一个可以处理所有可能路由的路由的后端。如果您不打算拥有可以支持路由的后端（例如，您将提供静态文件），您应该坚持使用哈希历史记录。

浏览器历史如何工作的基本解释是它查看当前 URL 的pathname 并尝试将其与已知路由进行匹配。在您包含的错误中，您的pathname 是/Users/mike/project/index.html。这意味着为了让 React Router 匹配该 URL，您必须将 <Route> 的 path（或一系列嵌套的 <Route>s）定义为 /Users/mike/project/index.html。

<Route path='Users/mike/project/index.html' component={App} />

哈希历史记录适用于静态文件，因为它只是在 pathname 之后附加一个哈希符号，并根据之后的内容确定路由。

如果您的问题只是您不喜欢查询键（?_k=jkadjlkd），您可以指定在create your history instance 时不应包含该键。这些 URL 仍将包含 #，但不再附有密钥“垃圾”。

import { Router, useRouterHistory } from 'react-router'
import { createHashHistory } from 'history'

const appHistory = useRouterHistory(createHashHistory)({ queryKey: false })
<Router history={appHistory} />