React Router LINK does not pass parameters

Question

I have a React audiobook search application. It grabs data from Librivox by author last name and displays a list of books. Each item in the list has a link that in turn goes to a separate full book data component that displays all the data for that particular book (or whatever book the user selects from the list).

For the life of me, I cannot get the full data component to grab the book id from the URL (route):

Route defnition used by Link:

    <Route path="/book/:id" component={BookDataDisplay}/>

The BookListItem component (in SearchResults component) generates the following:

 <p><Link to={"/book/" + bookObject.id}>DISPLAY FULL BOOK DATA</Link></p>

Actual link generated:

  http://jstest.dd:8083/react_librivox_search/book/3277

But the BookDisplay component never gets this.props.params, which remains an empty object. The render() method for the book display component engages, but there is no data with which to populate the book display, since the this.props.params.id variable never grabs the "3277" id number from the URL (without the book id, I cannot grab the data).

Any idea what might be going wrong. I have been wondering whether I have to define PropTypes or ContextTypes to get the parameter passing to work, BUT I DO NOT SEE ANYWHERE IN THE DOCUMENTATION where it is stated that the passing works anyway but automatically once you have defined the Route and parameters.

I am using Redux, but I don't think that this issue has anything to do with redux, UNLESS redux commandeers ALL components and makes them ALL depend on updating the Redux store (I am not sending the whole book list down to the individual book data display component).

Answer 1

Since this is a new account I can't comment. I had this same problem too. Are you sure you have spelled it correctly?

since the this.props.params.id variable never grabs the "3277" id number from the URL

Have you tried this.props.match.params.id ?

---

This is my <Link> in another component

<Link to={`/profile/${this.state.comment.User.id}`}>@{this.state.comment.User.name}</Link>

And my Route

{/* ProfileView */}
<Route path="/profile/:user_id" component={ProfileView} />

and it works well...

Answer 2

I created a similar setup and it worked for me

URL - file:///Users/Arjun/react/static/index.html#/book/1

<Route path="/book/:id" component={BookComponent} />

Can you bundle your js (if you are using webpack or any other framework) and then run the application in incognito/private browsing mode just to ensure that the you have all the latest changes running on the browser. It is likely that browser history/cache is causing the problem.

Answer 3

Can you please try out

 <p><Link to={"/book/" + bookObject.id} params={{ bookObjectId: bookObject.id }}>DISPLAY FULL BOOK DATA</Link></p>

let me know how it went.

---

Hi, I read your message.

@Peter Hi, it seems like there is an error from other React code that you have. Can you please share the source code where it actually throws an error? Also, it is always a best practice to have "name='pageName' " in your Route tag. If you want to retrieve params from the other page, just use

const {bookObjectId} = this.params;

Answer 4

there is a way you can pass more than one parameter. You can pass "to" as object instead of string.

<Route path="/category/:catId" component={Category} / >

const newTo = { pathname: "/article/595212758daa6810cbba4104", param1: "Par1" };

<Link to={newTo}> </Link>

this.props.match.params.id // this is 595212758daa6810cbba4104 
this.props.location.param1 // this is Par1