I am building a web page that I want to be dynamically routed with the react-router, and useParams() does not hold the passed-in value on the final page that the route ends on.

Here are my routes:

import React from "react";
import ReactDOM from "react-dom";
import CssBaseline from "@mui/material/CssBaseline";
import { 
  BrowserRouter, 
  Routes, 
  Route, 
  } from "react-router-dom";
import "./index.css";
import App from "./App";
import Items from "./routes/items";
import TextContentPage from "./routes/textContentPage";
import reportWebVitals from "./reportWebVitals";
import HomePage from "./routes/homePage";
import TopicPage from "./routes/topicPage";

ReactDOM.render(
  <React.StrictMode>
    <CssBaseline />
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="trees" element={<App />} />
        <Route path="items" element={<Items />} />
        <Route path="text-content" element={<TextContentPage />} />
        <Route path ="topics/:id" element={<TopicPage />} />
      </Routes>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

And here is the page I am trying to render:

import { useParams } from "react-router-dom"
import Container from "@mui/material/Container";
import Header from "../components/Header";
import Card from '@mui/material/Card'
const topics = [
    {
        id: 1,
        name: "Environement",
        fund: 0 
    },
    {
        id: 2,
        name: "Education",
        fund: 0 
    },
    {
        id: 3,
        name: "International affairs",
        fund: 0 
    }
]

export default function TopicPage(){
    
    const topicId = useParams()
    let topic = topics.find(topic => topic.id === topicId)
    return (
        <Container maxWidth = "sm">
            <Header title = "Map The Future"> 
            </Header>
            <main>
                <Card><h2>{topic.name}</h2></Card>
            </main>
        </Container>
        
    );

}

Any Help figuring out how to get useParams() to work would be greatly appreciated!!

CodePudding user response：

Spotted two issues with your code. Try these edits and see if they help.

1. useParams returns object, so try using the object destructuring syntax:

let { id } = useParams()

Your variable name needs to match what you used in your <Route /> component - "id".

2. Since the useParams values are grabbed from the URL, they're String types. To convert to integers:

id = parseInt(id, 10)

CodePudding user response：

useParams returns an object of key/value pairs of URL parameters.

And since you've define path as: <Route path ="topics/:id" element={<TopicPage />} /> While accessing useParams since it returns an object you'll get key/value pair so use object destructuring const {id} = useParams() and since it's of type String you need to parseInt the returned value.

export default function TopicPage(){
    
    const {id} = useParams()
    let topic = topics.find(topic => topic.id === parseInt(id)) // Change here
    return (
        <Container maxWidth = "sm">
            <Header title = "Map The Future"> 
            </Header>
            <main>
                <Card><h2>{topic.name}</h2></Card>
            </main>
        </Container>
        
    );

}