React router v4 Link to

Question

This is an invalid syntax for some reason

 <Link to={'/page/with/' + id + '/' + name}>Some param Page</Link>

The entire error is this and the app just doesn't compiles

Line 17:  Unexpected use of 'name'  no-restricted-globals

Search for the keywords to learn more about each error.

But this one is valid

<Link to={'/page/with/' + id}>Some param Page</Link>

So my question is how can i make a link that matches

 <Route path="/page/with/:id/:name" component={SomeParamPage}/>

The route is valid if write directly in the url it works, the problem is the Link

import React from 'react'
import {Link} from 'react-router-dom'

let id = 2;
let name = 'sasho';
const Header = () => (
    <h2>
        Header
        <br/>
        <Link to="/">Home</Link>
        <br/>
        <Link to="/about">About</Link>
        <br/>
        <Link to="/about-us">About us</Link>
        <br/>
        <Link to="/contact">Home</Link>
        <br/>
        <Link to={'/page/with/' + id + '/' + name}>Some param Page</Link>
    </h2>
);

export default Header;

This error is related to [this page](https://eslint.org/docs/rules/no-restricted-globals) — bennygenel, Sep 07 '17 at 18:02
Can you show the code where `name` is declared and assigned a value? Sounds like an issue with how it gets created. — Chase DeAnda, Sep 07 '17 at 18:05

score 1 · Accepted Answer · answered Sep 07 '17 at 17:48

1

This error here

Line 17:  Unexpected use of 'name'  no-restricted-globals

Search for the keywords to learn more about each error.

name is a keyword in JS, so it throws an error. It's like trying to name a variable this - you're going to run into issues. Try picking a different variable name.

answered Sep 07 '17 at 17:48

Christopher Messer

2,040
9
13

https://stackoverflow.com/questions/2663740/what-is-the-name-keyword-in-javascript according to this it's not, but thanks anyway – Все Едно Sep 07 '17 at 17:54

score 0 · Answer 2 · answered Sep 07 '17 at 20:44

Ah, thanks for the edit! You are creating name outside of Header scope. let and const are limited in scope to the block, statement, or expression on which it is used. To fix this, just move name into the Header stateless component:

const Header = () => {
  let name = 'sasho';
  let id = 2;
  return (
        <h2>
          Header
          <br/>
          <Link to="/">Home</Link>
          <br/>
          <Link to="/about">About</Link>
          <br/>
          <Link to="/about-us">About us</Link>
          <br/>
          <Link to="/contact">Home</Link>
          <br/>
          <Link to={'/page/with/' + id + '/' + name}>Some param Page</Link>
        </h2>
    );
}

React router v4 Link to

2 Answers2