ReactJS React Router params

Question

I currently have a React Router problem with my ReactJS project. I have a page that renders a view, inside the view is a .map function, which maps over all users and places the "first_name" inside an <h4> tag. The map functions works correctly for all users.

I want to be able to click on the user's first_name and it navigates to a new route with the _id as a parameter. The new component that you are navigated to will receive the _id and I will search the DB for their _id.

The intended routes:

| URL                 | Components |
|---------------------|------------|
| `/`                 | `Main`     |
| `/platform`         | `Platform` |
| `/platform/:userID` | `Editor`   |

Currently I have 3 files, the routes.js which holds all of the ReactRouter config. The index.js holds the rendered list of users from the DB. And the editor.js file that will receive a user's _id in the URL.

// Routes.js
import Main from './components/main';
import Home from './components/home';
import Platform from './components/platform';
import Editor from './components/editor';

<Route name="home" path="/" component={Main}>
    <IndexRoute component={Home} />
    <Route name="platform" path="platform/" component={Platform}>
        <Route name="user" path="/:userId" handler={Editor} />
    </Route>
</Route>


// Platform.js
{users.map(({_id, first_name, last_name}, index)=>
    <div>
        <Link to="user" params={{userId: _id}}>
            <h4 style={{fontFamily: 'Raleway', color: '#498EE0'}}>{first_name} {last_name} : {_id}</h4>
        </Link>
        <hr />
    </div>
)}

You should be able to click on the Link and the params are added onto the URL.

Currently when I try this, it simple appends /user onto my URL, so it appears localhost:8080/user

Answer 1

You need to change to parameter like this -

<Link to={`/user/${_id}`}>
  <h4 style={{fontFamily: 'Raleway', color: '#498EE0'}}>{first_name} {last_name} : {_id}</h4>
</Link>