Home Ask Login Register

Developers Planet

Your answer is one click away!

aryan February 2016

react redux hash based routing

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

and I have a header component like :

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

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


Radosław M February 2016

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

Link it like this:

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

And let the router do the rest.

Post Status

Asked in February 2016
Viewed 3,870 times
Voted 13
Answered 1 times


Leave an answer

Quote of the day: live life