CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-dom
SHelari
SHelari

Reputation: 55

How to pass info with React Router to the new page?

I've made a quick CodeSandBox example what I am after. I have a "Our Courses" section on the landing page with the button "Read more". Once the "Read more" button gets clicked, depending on the Course it would render that information. Now I got the button to work but now I am stuck and can't figure out how to pass relevant information to the redirected page. Now let's say I want to get the Course "Title" and "Description" get passed onto to the redirected page. How can I do that?

CodeSandBox link here - Link here

Upvotes: 1

Views: 288

Answers (4)

Ben Smith
Ben Smith

Reputation: 20230

Your CardInfo component can look-up the course detail from your courses repository.

To perform the look-up you can determine which card was selected by using the react-router useParams hook; this allows you to determine which course identifier was passed via the selected route i.e.

import React from "react";
import courses from "./courses";
import { useParams } from "react-router-dom";

const CardInfo = () => {
  const { id } = useParams();
  const course = courses.find(course => course.id === id);

  return (
    <div>
      <h1>{course.title}</h1>
      <p>{course.description}</p>
    </div>
  );
};

export default CardInfo;

A complete working example of this can be seen here (its a fork of your CodeSandBox).

Upvotes: 2

David
David

Reputation: 948

There are multiple approaches to pass this data:

You can pass data through the link state like this:

<Link
    to={{
        pathname: `/card/${course.title}`,
        state: { description: course.description }
    }}
>...</Link>

And then read it in the CardInfo component like this:

import { useLocation } from "react-router-dom";

const CardInfo = () => {
  const location = useLocation();

  console.log(location.state) // { description: 'Lorem ipsum...' }



However, the best way to do this is to pass the course id in the URL and read the rest of the information from the courses.js file:

This is already correct, you accept the course id as URL paramter:

<Route path="/card/:id" component={CardInfo} />

Pass the course id in the link:

 <Link to={`/card/${course.id}`}>

Read the id parameter from the URL and get the rest of the course information from the courses file:

import { useParams } from "react-router-dom";
import courses from './courses'

const CardInfo = () => {
  const params = useParams();

  console.log(courses[params.id]);

Upvotes: 1

Barry Michael Doyle
Barry Michael Doyle

Reputation: 10598

In your CardInfo component you can access the id provided by the route using the useParams from your react-router-dom library.

I'm using your <Route path="/card/:id" component={CardInfo} /> for reference.

Implement it like this:

import React from 'react'
import { useParams } from 'react-router-dom'

const CardInfo = () => {
  const { id } = useParams()

  return <div>Card ID: {id}</div>
}

export default CardInfo

Now that you've got the id you should be able to use it for whatever you need.

Upvotes: 1

rzwnahmd
rzwnahmd

Reputation: 1082

You can pass data between Routes by using the object version of the to prop of Link component, so change your Link component to this:

//Card.jsx
<Link 
  to={{
    pathname: `/card/${course.title}`,
    state: {
      description: course.description
    }
  }}>
  <button className="btn">Read more</button>
</Link>

Then in your CardInfo.jsx component you can access this data by props.location.state.description

import React from "react";

const CardInfo = (props) => {
  console.log(props)
  return (
    <div>
      <h1>
        How can I pass course title here depending on which button I click
      </h1>
      <p>{props.location.state.description}</p>
    </div>
  );
};

export default CardInfo;

Hope it helps :)

Upvotes: 1

Related Questions