USStateDept / State-TalentMAP

A comprehensive research, bidding, and matching system to match Foreign Service employees with the right skills to available posts and positions. API Layer - https://github.com/USStateDept/State-TalentMAP-API
Other
31 stars 16 forks source link

Use composition and render a <Route> #1987

Open Montana opened 2 years ago

Montana commented 2 years ago

Hey all,

The <Route> component isn't specifically just for matching locations. You can render a pathless route and it will always match the current location. The <Route> component passes the same props as withRouter, so you will be able to access the history methods through the history prop, much like this:

import { Route } from 'react-router-dom'

const Button = () => (
  <Route render={({ history}) => (
    <button
      type='button'
      onClick={() => { history.push('/new-location') }}
    >
      State-TalentMAP-Test
    </button>
  )} />
)

So, my question then is, is it possible to work in React's context model? This is where I feel most comfortable when working with React and the React Context API is currently stable, so an example would be:

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

Button.contextTypes = {
  history: React.PropTypes.shape({
    push: React.PropTypes.func.isRequired
  })
}

Thank you so much!

Cheers, Montana Mendy