Dev OverFlow | Question

Home

Community

Collections

How to programmatically navigate using React Router?

asked 11 months ago.

3 Answers

34 views

With react-router I can use the Link element to create links which are natively handled by react router.

I see internally it calls this.context.transitionTo(...).

I want to do a navigation. Not from a link, but from a dropdown selection (as an example). How can I do this in code? What is this.context?

I saw the Navigation mixin, but can I do this without mixins?

react

react-router

logic

3 Answers

Dr Genetics

- answered Jun 06, 2024, 6:46 AM

I don't know this questions

Dr Genetics

- answered Apr 20, 2024, 5:06 AM

Use the `withRouter` higher-order component

The withRouter higher-order component will inject the history object as a prop of the component. This allows you to access the push and replace methods without having to deal with the context.

import { withRouter } from 'react-router-dom'
// this also works with react-router-native

const Button = withRouter(({ history }) => (
  <button
    type='button'
    onClick={() => { history.push('/new-location') }}
  >
    Click Me!
  </button>
))

Write your answer here

Popular Tags

How to programmatically navigate using React Router?

3 Answers

Use the withRouter higher-order component

Write your answer here

Top Questions

Popular Tags

Use the `withRouter` higher-order component