Breaking News: Grepper is joining You.com. Read the official announcement!

reactjs dynamic route

Add Answer

S3NS4 answered on July 11, 2022 Popularity 10/10 Helpfulness 4/10

answer reactjs dynamic route

related dynamic routes in react router dom

related dynamic routes with react-router-dom

reactjs dynamic route

Comment

/* Links */
{heroes.map(hero => (<Link to={'heroes/' + hero.id} />)}
              
<Router>
  /* Component */
  <Route path="heroes/:id" component={Hero} />
</Router>

import { useParams } from "react-router-dom";
const Hero = () => {
    const params = useParams();
    // params.id => dynamic value defined as id in route
    // e.g '/heroes/1234' -> params.id equals 1234
    return (...)
}

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: dynamic javascript reactjs

Link to this answer
Share Copy Link

Contributed on Jul 11 2022

S3NS4

0 Answers Avg Quality 2/10

Closely Related Answers

dynamic routes in react router dom

Comment

// Users.js file
import React from "react";
import { Link, Outlet} from "react-router-dom";
function Users() {
  const users = [
    {id: 1, name: 'User 1 details'},
    {id: 2, name: 'User 2 details'},
    {id: 3, name: 'User 3 details'},
  ]
  return (
    <div>
      {users.map((item) => (
 <Link to={`/users/${item.id}`} key={item.id}><h5>{item.name}</h5></Link>
      ))}
      <Outlet />
    </div>
  );
}
export default Users;

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: dev.to

Tags: dom

Link to this answer
Share Copy Link

Contributed on May 16 2023

Imran Khan

0 Answers Avg Quality 2/10

dynamic routes with react-router-dom

Comment

dynamic routes with react-router-dom

Update so this works for React Router v6:

React Router v6 brought some changes to the general syntax:

Before:   <Route path="heroes/:id" component={Hero} />

Now:      <Route path="heroes/:id" element={<Hero />} />

You can't access params like with this.props.match anymore:

Before:   this.props.match.params.id

Now:      import {useParams} from "react-router-dom";
          const {id} = useParams();

You can now just use id as any other variable.

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: dynamic

Link to this answer
Share Copy Link

Contributed on May 18 2024

Arrogant Alligator

0 Answers Avg Quality 2/10

reactjs dynamic route

Contents

More Related Answers

reactjs dynamic route

Closely Related Answers

dynamic routes in react router dom

dynamic routes with react-router-dom

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.