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>

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

反应基于redux hash的路由

1 个答案: