react redux 基于哈希的路由

Question

我有一个类似的路由器：

<Router history={browserHistory}>
        <Route path="/" component={App}>
        <IndexRoute component={Login} />
        <Route path="/#!login" component={Login} />
        <Route path="/#!first" component={First} />
        <Route path="/#!second" component={Second} />
        </Route>
  </Router>

我有一个像这样的标题组件：

class Header extends Component {
  render() {
    return (
      <div>
        <h3><Link to="/#!first">First</Link></h3>
        <h3><Link to="/#!second">Second</Link></h3>
      </div>
    )
  }
}

export default Header

现在，当我在标题中单击 First 时，它不会将我重定向到该链接..

如何在 react 和 redux 中实现基于哈希的路由

Answer 1

使用hashHistory，让您的所有路线都知道您的历史记录。改为这样做：

import { hashHistory } from 'react-router';

<Router history={hashHistory}>
    <Route path="/" component={App}>
        <IndexRoute component={Login} />
        <Route path="login" component={Login} />
        <Route path="first" component={First} />
        <Route path="second" component={Second} />
    </Route>
</Router>

像这样链接它：

<Link to="/first">First</Link>

然后让路由器完成剩下的工作。