score:0

You can use path params option of react-router-dom .

Example

import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'

import Topic from '../topic'

export default function App() {
  return (
    <Router>
      <div>
        <Route path="/topic/:name" component={Topic} />
      </div>
    </Router>
  );
}

Pass the params:

import React, { Component } from "react";
import { Link } from 'react-router-dom'

export default class Topics extends Component {
  render() {
    return <Link to="/topic/someTopicName">Some Topic</Link>;
  }
}

Access router params in the component

import React from 'react'

export default function Topic(props) {
  return <h1>{props.match.params.name}</h1>
}

score:0

This is how you can pass data to navigated component

<Link
  to={{
    pathname: '/home/userDetails',
    state: {infoId: info.id},
  }}
>

And access like this in navigated component

if it's class based component.

this.props.location.state

if it's functional component

props.location.state

score:0

If your using function component in your react application. You can follow below steps

Main page:

<Link
  to={{
    pathname: '/your/path',
    state: { 
       data: "your data"
    },
  }}
>

In your child page or page you wanted to route:

use useLocation (version 5.+) hook

const emp = useLocation()

console.log(emp)

Output

{ 
   state: { 
       data: "your data" 
   } 
}

score:10

Option 1: Pass Route State

Send the state in the route transition.

  • Using react-router-dom v5

You can pass some state unique to the mapped entry, like info.id along with the route push that happens when the link is clicked. This obfuscates the data from the user as you aren't leaking information out to the ui (i.e. the browser).

<Link
  to={{
    pathname: '/home/userDetails',
    state: {
      infoId: info.id,
    },
  }}
>
  • Using react-router-dom v6

The link API changed a bit in v6, the state is now a prop.

<Link
  to='/home/userDetails'
  state={
    infoId: info.id,
  }
>

You can then unpack the state from the location prop/object on the component being returned by that route. Use guards in case a user has navigated to '/home/userDetails' from elsewhere, as state may be undefined.

If passed route props:

props.location && props.location.state && props.location.state.infoId

or

props.location?.state?.infoId

if using function components then you can also use the useLocation React hook:

const { state: { infoId } = {} } = useLocation();

Edit lucid-kowalevski-uxgs4

Option 2: Pass Something in the URL

<Link to={`/home/userDetails/${info.id}`>

And retrieve the param from the match prop in the returned route component. For example if the route looks like this:

<Route path="/home/userDetails/:infoId" component={... } />

Then in the component get id:

props.match.params.infoId

And in the case of function components, the useParams React hook:

const { infoId } = useParams();

The user can see this, but you don't have to use the guard pattern to access since by definitions it'll be defined by the route (though infoID can still be defined if the user types in an invalid id).


Related Query

More Query from same tag