react-router 路由与 /your Route not /#/a Route

Question

我是 react-router 的新手，想知道是否可以就我的项目中的一些基本内容获得一些帮助。我的路由器正在运行，一切正常，除了当我去我的路线/about（我唯一的路线）时，我得到“Cannot GET /about”但是当我去/#/about时它成功地去路线。使用 Link 也可以，但使用 /#/about 路由。总之，我的项目如下所示：

render((
  <Router history={hashHistory}>
    <Route path="/" component={Layout}>
      <Route path="/about" component={About}/>
    </Route>
  </Router>
  ),

document.getElementById('app'))

和

export default class Layout extends React.Component {
  render() {
    return (
      <div>
        <nav class="navbar navbar-default navbar-fixed-top">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
              </button>
          <Link to="/" class="navbar-brand">React Router Test</Link>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li><Link to="/about">About</Link></li>
          </ul>
        </div>
      </div>
    </nav>
    <div id="page">
    {this.props.children}
    </div>
    <footer class="footer">
      <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
      </div>
    </footer>
  </div>
);
  }
}

关于组件

const styles = {}
styles.body = {
  margin: 70,
}
export default React.createClass({
  render() {
    return <div style={styles.body}>About</div>
  }
})

请告诉我如何让应用识别/about 而不仅仅是/#/about

Answer 1

根据您的 react-router 版本，如何准确访问和更改这可能会有所不同，但要点应该相同。

您当前正在使用哈希历史记录。这意味着您的网址将使用哈希构建。另一个选项是使用浏览器历史记录。这将启用干净的 url www.example.com/about。

import { browserHistory } from 'react-router'
render((
  <Router history={browserHistory }>
    <Route path="/" component={Layout}>
      <Route path="/about" component={About}/>
    </Route>
  </Router>
  ),

https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md

附言。如果上述方法不起作用，请查阅 react-router 文档和您使用的版本。他们在这个部门进行了一些 API 更改和包更改（history 包有效地推动了这种行为）。