react redux hash based routing

Question

I have a router like:

<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>

and I have a header component like :

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

Now when I click First in my headers it does not redirect me to that link..

How can I implement hash based routing in react and redux

Answer 1

Use hashHistory, and let all your routes should be aware of your history. Do this instead:

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 it like this:

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

And let the router do the rest.