Question

由于某种原因，这是一种无效的语法

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

整个错误都是这个，应用程序只是不编译

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

Search for the keywords to learn more about each error.

但这个是有效的

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

所以我的问题是我如何建立一个匹配

的链接

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

如果直接在其工作的网址中写入，该路由有效，问题是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;

Answer 1

此处出现此错误

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

Search for the keywords to learn more about each error.

name是JS中的关键字，因此会抛出错误。这就像试图命名变量this - 你将遇到问题。尝试选择其他变量名称。

Answer 2

啊，谢谢你的编辑！您正在name范围之外创建Header。 let和const的范围受限于使用它的块，语句或表达式。要解决此问题，只需将name移至Header无状态组件：

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链接到

2 个答案: