反应路由器 v4 Link 到

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>

所以我的问题是如何制作一个 link 匹配

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

直接在url中写入路由有效，问题是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

啊，感谢编辑！您正在 Header 范围之外创建 name。 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>
    );
}

反应路由器 v4 Link 到

React router v4 Link to

router

hyperlink

reactjs