javascript - react-router 1.0 路由被express.js服务器拾取

Question

我一直在尝试让客户端路由仅由客户端处理。我认为这可以通过 HTML5 History API 实现。我的问题是express选择了像“/details/55”这样的路线(当我尝试执行“/#details/55”时，react-router和express什么都不做)。我缺少什么。

app.js

import React from 'react'
import { render } from 'react-dom'
import { IndexRoute, Route, Router, Link } from 'react-router'
import createBrowserHistory from 'history/lib/createBrowserHistory'

class App extends React.Component {
  render () {
    return (
            <div>
              <h1>
              Shared Header
              </h1>
              {this.props.children}
            </div>
      )
  }
}

const history = createBrowserHistory()

render((
  <Router history={history}>
    <Route path='/' component={App}>
      <IndexRoute component={Index} />
      <Route path='/details/:id' component={Details} />
      <Route path='*' component={NoMatch} />
    </Route>
  </Router>
  ), document.getElementById('app'))

服务器.js

import express from 'express'


app.use(express.static('public'))

app.get('/', (req, res) => {
  res.sendFile('index.html')
})

// Hack to get react-router to not interfere with express.
app.get('/details/:id', (req, res) => {
  res.sendFile('index.html')
})

Answer 1

在express中使用通配符

app.get('/*', (req, res) => {
  res.sendFile('index.html')
});

这将强制通过返回索引页面来处理所有服务器请求，其中 react 路由器将通过查看完整的 URL 来接管。