Question

我有路径需要React Router处理，我还有一个快速API后端，我从React应用程序调用它来进行一些安全的API调用。

/#/ - 想要在这里投放的应用
/#/:id - 应用的唯一网址，我使用该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')))

My 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对象，我从快递发送，这是正确的 - 转到localhost:8000/#/somehashcode STILL会给我HomePage组件，当它应该给我ConsentForm组件时。

我使用React Dev工具检查了Router组件：
- RouterContext组件在routes内有一个名为childRoutes且routes[0]的对象，其路径为/:id。 routes[0]还有一条路径/告诉我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();
});

从中学到两件事：
- 在路线中使用＃不起作用。不知道为什么。
- 同样明确说明React方面的路线。

非常奇怪，或者我可能会忘掉一些半生不熟的知识。任何指向正确方向的资源都会非常棒。

非常确定其他人会因为他们一起使用Express和React而遇到这个问题。

Answer 2

找到你的问题。

您在配置中使用BrowserHistory。此选项（目前推荐的选项）不使用uri中的哈希值，而是直接与浏览器集成。

尝试点击localhost:8000/somehashcode处的应用，看看你得到了什么。

反应路由器＆amp;表达冲突

2 个答案: