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

Question

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

User · Answer

I m using this to redirect with React Router v4   this props history push   foo      Hope it work for you

User · Answer

This is how I did a similar thing  I have tiles that are thumbnails to YouTube videos  When I click the tile  it redirects me to a  player  page that uses the  video id  to render the correct video to the page    lt GridTile   key  video id    title  video title    containerElement   lt Link to    player   video id     gt     gt    ETA  Sorry  just noticed that you didn t want to use the LINK or REDIRECT components for some reason  Maybe my answer will still help in some way

User · Answer

React Router v4   There s a couple of things that I needed to get this working smoothly   The doc page on auth workflow has quite a lot of what is required   However I had three issues    Where does the props history come from  How do I pass it through to my component which isn t directly inside the Route component What if I want other props    I ended up using    option 2 from an answer on  Programmatically navigate using react router  - i e  to use  lt Route render gt  which gets you props history which can then be passed down to the children  Use the render  routeProps   gt   lt MyComponent     props   routeProps    gt   to combine other props from this answer on  react-router - pass props to handler component    N B  With the render method you have to pass through the props from the Route component explicitly  You also want to use render and not component for performance reasons  component forces a reload every time    const App    props    gt         lt Route          path   home           render  routeProps   gt   lt MyComponent     props      routeProps  gt         gt     const MyComponent    props    gt                    link https   reacttraining com react-router web example auth-workflow        N B  I use  props history  instead of  history               lt button onClick       gt            fakeAuth signout      gt  props history push   foo           gt Sign out lt  button gt      One of the confusing things I found is that in quite a few of the React Router v4 docs they use MyComponent      match    i e  Object destructuring  which meant initially I didn t realise that Route passes down three props  match  location and history  I think some of the other answers here are assuming that everything is done via JavaScript classes    Here s an example  plus if you don t need to pass any props through you can just use component  class App extends React Component       render               lt Route              path   home               component  MyComponent            gt           class MyComponent extends React Component       render                              link https   reacttraining com react-router web example auth-workflow            N B  I use  props history  instead of  history                       lt button onClick       gt                this fakeAuth signout      gt  this props history push   foo               gt Sign out lt  button gt

User · Answer

Try this    this props router push   foo     warning works for versions prior to v4  and   this props history push   foo     for v4 and above

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

Examples related to javascript

Examples related to react-router

Examples related to material-ui

Examples related to react-router-v4