反应路由器和快递冲突

Question

我有我希望 React Router 处理的路径，并且我还有一个 express API 后端，我从 React 应用程序调用它来执行一些安全的 API 调用。

/#/ - 想要在这里提供应用程序
/#/:id - 应用程序的唯一 URL，我使用 ID 从 React 调用某些快速端点。
* - 所有快速 REST 端点

快递 app.js：

app.use(middleware);
app.use(require('webpack-hot-middleware')(compiler, {
  log: console.log
}));
app.use('/api', [router_invokeBhApi]);
app.get('/#/*', function response(req, res) {
  res.write(middleware.fileSystem.readFileSync(path.join(__dirname, 'dist/index.html')));
  res.end();
});
app.use(express.static(path.join(__dirname, '/dist')))

我的 React 路由组件：

export default (
  <Route path="/" component={App}>
    <IndexRoute component={HomePage} />
    <Route path="/:id" component={ConsentForm} something="dope"/>
  </Route>
);

这就是正在发生的事情：
- 转到 localhost:8000 使用 HomePage 组件为应用程序提供服务
- 转到 localhost:8000/#/ 也为应用程序提供 HomePage 组件
- 去localhost:8000/example 给我Cannot GET /example 这意味着快递正在工作
- 转到localhost:8000/api 给了我一个测试 JSON 对象，这是我从 express 发送的，这是正确的。
- 转到localhost:8000/#/somehashcode 仍然给我HomePage 组件，而它应该给我ConsentForm 组件。

我使用 React 开发工具检查了路由器组件：
- RouterContext 组件有一个名为routes 的对象，在routes[0] 内有一个childRoutes，它的路径为/:id。 routes[0] 也有一个路径 / 告诉我 React Router 正确加载了所有路由？？

好困惑……

我在其中渲染整个应用程序的 React 文件：

import 'babel-polyfill';

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, browserHistory } from 'react-router';

import Routes from './shared/components/Routes';

import './shared/base.css';
import './shared/customInput.css';


const ROOT_ELEMENT = 'app';

ReactDOM.render((
  <Router history={browserHistory}>
    {Routes}
  </Router>
), document.getElementById(ROOT_ELEMENT));

Answer 1

我终于明白了！

在 React Router 组件中，将 :id 路由更改为：

<Route path="/redirect/:id" component={ConsentForm} something="dope"/>

在 Express 中，app.js 将 React 服务更改为：

app.get('/redirect/*', function response(req, res) {
  res.write(middleware.fileSystem.readFileSync(path.join(__dirname, 'dist/index.html')));
  res.end();
});

从中学到 2 件事：
- 在路由中使用 # 不起作用。不知道为什么。
- 在 React 端也明确说明路由。

很奇怪，或者我可能是在使用一些半生不熟的知识。任何能够为我指明正确方向的资源都会非常棒。

很确定其他人在同时使用 Express 和 React 时会遇到这种情况。

Answer 2

发现你的问题。

您在配置中使用BrowserHistory。这个选项（目前推荐的）在uri中没有使用hash，而是直接与浏览器集成。

尝试通过localhost:8000/somehashcode 访问您的应用，看看您会得到什么。