React JS - How to render same component with different ids without page refreshing?

Question

I have a navbar with links

render() {
    return (
      <Link to={"/test/1"} >Task 1 </Link>
      <Link to={"/test/2"} >Task 2 </Link>
      <Link to={"/test/3"} >Task 3 </Link>
      <Link to={"/test/4"} >Task 4 </Link>
    )
}

And i set the route to call the corresponding component with dynamic id to display the contents based on the id

And my called Test component has the following code

render() {
    return (            
        <div>
            <div>
                {this.props.id}
            </div>
        </div> 
    );
}

And i need to change the contents in my component based on the id passed in the route without refreshing. But {this.props.id} does not populates the value there. How can i solve this?

because that value will not get passed as `this.props.id`, it will be inside `params`, access that by using `this.props.match.params.id` — Mayank Shukla, Mar 08 '18 at 12:15
Possible duplicate of [react-router: How to get parameter value from URL](https://stackoverflow.com/questions/35352638/react-router-how-to-get-parameter-value-from-url) — Mayank Shukla, Mar 08 '18 at 12:18

score 2 · Accepted Answer · answered Mar 08 '18 at 12:14

2

When using React router, you will have an object called match which contains various other properties. Among them one is params which contains all the parameters you pass through a route.

Accessing routes and its params should be done using props.match.params.id (Assuming you have configured your route as <Route path="/test/:id" component={YourComponent} />

answered Mar 08 '18 at 12:14

G_S

7,068
2
21
51

My route is `` and i'm getting the error as "TypeError: Cannot read property 'params' of undefined" – Hareesh Mar 08 '18 at 12:36
Can you post your Test component aswell? – G_S Mar 08 '18 at 12:41
Test component is which tries to display the `id` mentioned in my question. Please refer. – Hareesh Mar 08 '18 at 12:43
When i avoid `match` and tried as `this.props.params.id` i'm getting the result. But now the issue facing is `componentDidMount()` given in the **Test** component is not working. – Hareesh Mar 08 '18 at 12:51
Whats happening in componentDidMount? – G_S Mar 08 '18 at 13:15
Just given `componentDidMount(){ console.log(this.props.params.id) }` but nothing happens in my console – Hareesh Mar 08 '18 at 13:16
componentdidmount will be only invoked once. Check your componentdidupdate method – G_S Mar 08 '18 at 13:32
This works but when i added an API call inside this componentDidUpdate, it gets looping the API call as the result makes an update and this update function invokes – Hareesh Mar 08 '18 at 14:04
Well.. What are you doing in componentdidupdate after API call? – G_S Mar 08 '18 at 14:09
I was just setting the values received from the api to state variables. – Hareesh Mar 08 '18 at 14:42
Setting state in componentdidupdate will make component to re-render again and again making it to go to an infinite loop. (do you have a condition where it stops doing setState in componentdidudpate?? – G_S Mar 09 '18 at 06:30
I just used `componentWillReceiveProps` – Hareesh Mar 09 '18 at 06:39

score 0 · Answer 2 · answered Mar 08 '18 at 12:14

Try something like that:

const Parent = () => (
    <div>
        <Link to="/test/1">Task 1</Link>
        <Link to="/test/2">Task 2</Link>
        <Link to="/test/3">Task 3</Link>
        <Link to="/test/4">Task 4</Link>

        <Route path="/test/:id" component={Child} />
    </div>
)

const Child = (props) => (
    <div>
        <h3>ID: {props.match.params.id}</h3>
    </div>
);

score 0 · Answer 3 · answered Mar 08 '18 at 12:14

You could use a query string to pass the ID to the component,

render() {
    return (
      <Link to={`/test/1?id=${id1}`} >Task 1 </Link>
      <Link to={`/test/2?id=${id2}`} >Task 2 </Link>
      <Link to={`/test/3?id=${id3}`} >Task 3 </Link>
      <Link to={`/test/4?id=${id4}`} >Task 4 </Link>
    )
}

You can then get the query param from props if you are using react router which I suspect you are.

render() {
    return (            
        <div>
            <div>
                {this.props.location.query.id}
            </div>
        </div> 
    );
}

As G_S also mentioned, you can access the path param like so:

<div>{props.match.params.id}</div>

React JS - How to render same component with different ids without page refreshing?

3 Answers3