Changing the URL in react-router v4 without using Redirect or Link

javascript react-router material-ui react-router-v4
Alex picture Alex · Feb 16, 2017 · Viewed 103.5k times · Source

I'm using react-router v4 and material-ui in my React app. I was wondering how to change the URL once there is a click on a GridTile within GridList.

My initial idea was to use a handler for onTouchTap. However, the only way I can see to redirect is by using the components Redirect or Link. How could I change the URL without rendering those two components?

I've tried this.context.router.push('/foo') but it doesn't seem to work.

Answer

Ayush Sharma picture Ayush Sharma · Feb 16, 2017

Try this, 

this.props.router.push('/foo')

warning works for versions prior to v4

and 

this.props.history.push('/foo')

for v4 and above

Related questions

Intercept/handle browser's back button in React-router?

I'm using Material-ui's Tabs, which are controlled and I'm using them for (React-router) Links like this: <Tab value={0} label="dashboard" containerElement={<Link to="/dashboard/home"/>}/> <Tab value={1} label="users" containerElement={<Link to="/dashboard/users"/&…

Read More
Material-ui adding Link component from react-router

I'm struggling to add <Link/> component to my material-ui AppBar This is my navigation class: class Navigation extends Component { constructor(props) { super(props) } render() { var styles = { appBar: { flexWrap: 'wrap' }, tabs: { width: '100%' } } return ( <AppBar showMenuIconButton={false} …

Read More
How to combine ReactJs Router Link and material-ui components (like a button)?

I need to find a solution to be able to combine together the functionality of react router with the material ui components. For instance, I've this scenario: a router and a button. What I tried to do it is to …

Read More