reactjspathreact-router-v4

What do dollar and colon represent in React?


What do colon and dollar given below mean in React?

Example for colon:
<Route path={'/movie/:id'} component={Movie} />

Example for dollar, (its used right before the expression but why):
<Link to={`/movie/${this.state.movies[index].id}`} key={index} className="movieLink">


Solution

  • $ is not of react. But its ES6 feature called template literals more at Template Literals basic or template literals.

    In react, you have Route and Link components in react router module.

    Route takes two properties: path and component. When a path matches the path given to the component, it will return the component specified

    In your Route, you are saying to match any path which is of movie/anyid which means it navigates to the component specified (here Movie) with the given parameter

    Link is used to specify which path to go to. Its just a wrapper of <a> tag and helps in navigating to the specified path and in your current example, its to /movie/1 (assuming this.state.movies[index].id is 1)