How to use react-router-redux routeActions?

reactjs react-router react-router-redux
JAckWang picture JAckWang · Feb 4, 2016 · Viewed 14k times · Source

I'm trying to modify the example code of react-router-redux. https://github.com/rackt/react-router-redux/blob/master/examples/basic/components/Home.js

this is my Home.js

class Home extends Component {
    onSubmit(props) {
        this.props.routeActions.push('/foo');    
    }
}

I also have a mapDispatchToProps for it.

function mapDispatchToProps(dispatch){
    return bindActionCreators({ routeActions },dispatch);
}

When i called onSubmit function, I got an error

Uncaught TypeError: this.props.routeActions.push is not a function

If i remove this.props in onSubmit, the key in the URL changed but its still on the same page. From localhost:8080/#/?_k=iwio19 to localhost:8080/#/?_k=ldn1ew

Anyone know how to fix it? Appreciate it.

Answer

jjordy picture jjordy · Feb 4, 2016

I don't think routeActions are passed as props. What you want to do is this:

import { routeActions } from 'react-router-redux'

this.props.dispatch(routeActions.push('/foo'));

Related questions

React-Router External link

Since I'm using react-router to handle my routes in a react app, I'm curious if there is a way to redirect to an external resource. Say someone hits: example.com/privacy-policy I would like it to redirect to: example.zendesk.…

Read More
Detect Route Change with react-router

I have to implement some business logic depending on browsing history. What I want to do is something like this: reactRouter.onUrlChange(url => { this.history.push(url); }); Is there any way to receive a callback from react-router when the …

Read More
react-router scroll to top on every transition

I have an issue when navigating into another page, its position will remain like the page before. So it won't scroll to top automatically. I've also tried to use window.scrollTo(0, 0) on onChange router. I've also used scrollBehavior to fix …

Read More