pass props in link react-router

I am using react with react-router. I am trying to pass property’s in a "Link" of react-router If you are just looking to replace the slugs in your routes, you can use generatePath that was introduced in react-router 4.3 (2018). As of today, it isn't included in the react-router-dom (web) documentation, but is in react-router (core). Issue#7679 as for react-router-dom 4.x.x (https://www.npmjs.com/package/react-router-dom) you can pass params to the component to route to via: to get this via this.props.match.params.value at your CreateIdeaView class.

import {
   useLocation
} from 'react-router-dom'​
function Profile() {
   const location = useLocation()
   const {
      from
   } = location.state​
   return (
      ...
   )
}

<Route name="ideas" handler={CreateIdeaView} />

<Route name="ideas" path="/:testvalue" handler={CreateIdeaView} />

const backUrl = '/some/other/value'
// this.props.testvalue === "hello"

// Using query
<Link to={{pathname: `/${this.props.testvalue}`, query: {backUrl}}} />

// Using search
<Link to={{pathname: `/${this.props.testvalue}`, search: `?backUrl=${backUrl}`} />
<Link to={`/${this.props.testvalue}?backUrl=${backUrl}`} />

console.log(this.props.match.params.testvalue, this.props.location.query.backurl)
// output
hello / some / other / value

To recap, if you need to pass data from Link through to the new component that's being rendered, pass Links a state prop with the data you want to pass through. There are a few different approaches, but the one we'll focus on in this post is centered around being able to pass data from one route to another. To do this with React Router, we can pass data from the Link component through to the new Route that is being rendered. Anytime you pass data along via the state property, that data will be available on the location's state property, which you can get access to by using the custom useLocation Hook that comes with React Router.

<Link to={`/onboarding/profile`}>Next Step</Link>

<Link to="/onboarding/profile" state={{ from: "occupation" }}>  Next Step</Link>

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

function Profile() {
   const location = useLocation() const {
      from
   } = location.state
   return (...)
}

Perhaps you’re stuck with your data in one component and you’re thinking about whether or how it’s possible to pass that data through react-router’s <Link> component. In which cases passing props through Link can be practical.. to conditionally change component behaviour based on navigation history to avoid lifting state or using context/app state management to minimize the number of server requests Passing props through the <Link> component is primarily there to pass props related to the navigation history. That’s because you will only have access to those props by clicking on Link. You won’t have access to those same props if you go directly to that somewebsite.com/courses url in your browser

<Link to="/daggala">

<Link to={{pathname:"/", state: {fromDashboard: true }}}>

<Link to={{pathname:"/", fromDashboard: true }}>

<Link to={{pathname:"/", state:{fromDashboard: true }}}>

<span style="color:#F76E10"><Link to={{pathname:"/", someData:{fromDashboard: true }}}></span>