Change URL in response-router v4 without using redirect or link

Question

I am using response-router v4 and material-ui in a React application. I was wondering how to change the URL after clicking on the GridTile in the GridList .

My initial idea was to use a handler for onTouchTap . However, the only way to see the redirection is to use Redirect or Link components. How to change the url without rendering these two components?

I tried this.context.router.push('/foo') but it does not work.

Answer 1

Try it,

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

warning works for versions up to v4

Answer 2

I use this to redirect using React Router v4 :

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

Hope this works for you;)

Answer 3

React Router v4

Here are a few things I need to get this working smoothly.

The auth workflow doc page has quite a lot of essentials.

However, I had three problems

• Where does props.history come props.history ?
• How to pass it to my component that is not directly inside the Route component
• What if i want different props ?

I ended up using:

• option 2 of the answer to "Programmatically navigate using a responsive router" - i.e. use <Route render> , which gets you props.history , which can then be passed on to children.
• Use render={routeProps => <MyComponent {...props} {routeProps} />} to combine other props with this response to the “relay-relay-relay” to the handler component .

NB Using the render method, you must explicitly go through the props from the Route component. You can also use render rather than component for performance reasons ( component forces you to restart every time).

 const App = (props) => ( <Route path="/home" render={routeProps => <MyComponent {...props} {...routeProps}>} /> ) const MyComponent = (props) => ( /** * @link https://reacttraining.com/react-router/web/example/auth-workflow * NB I use `props.history` instead of `history` */ <button onClick={() => { fakeAuth.signout(() => props.history.push('/foo')) }}>Sign out</button> ) 

One of the confusing things I discovered is that in quite a few versions of React Router v4 they use MyComponent = ({ match }) ie Destruction of objects , which meant initially that I did not understand that Route misses three details, match , location and history

I think some of the other answers here suggest that everything is done using JavaScript classes.

Here is an example, plus, if you do not need to pass any props , you can just use component

 class App extends React.Component { render () { <Route path="/home" component={MyComponent} /> } } class MyComponent extends React.Component { render () { /** * @link https://reacttraining.com/react-router/web/example/auth-workflow * NB I use `props.history` instead of `history` */ <button onClick={() => { this.fakeAuth.signout(() => this.props.history.push('/foo')) }}>Sign out</button> } } 

Answer 4

Here's how I did it. I have tiles that are thumbnails for YouTube videos. When I click on the tile, it redirects me to the “player” page, which uses “video_id” to display the correct video on the page.

 <GridTile key={video_id} title={video_title} containerElement={<Link to={`/player/${video_id}`}/>} > 

ETA: Sorry, you noticed that for some reason you did not want to use LINK or REDIRECT components. Maybe my answer will still help .; )