使用新路径的路由参数答案

【问题标题】：Route parameters with a new path使用新路径的路由参数
【发布时间】：2021-12-24 09:23:42
【问题描述】：

我正在尝试将应用程序更新为具有 /、/user/:userId 和 /user/new 路由以及任何其他路由显示 404 消息。

我遇到错误请帮助。错误：预期的子字符串：“无法创建新用户” 收到的字符串：“

//App.js
import React from "react";
import "./style.css";
import { Link, Route, Switch } from "react-router-dom";
import NoMatch from "./NoMatch";
import UserProfile from "./UserProfile";

function Home() {
  return <h1>Home</h1>;
}

function NewUser(){
  return <h1>Unable to create a new user</h1>;
}

function App() {
  return (
    // No need to add <Router>, it has been added to ./index.js
    <div className="App">
      <div>
        <Link to="/">Home</Link>
      </div>
      <div>
        <Link to="/user/new">New User</Link>
      </div>
      
      {Array(10)
        .fill()
        .map((ignoredValue, index) => index + 1)
        .map((id) => (
          <div key={id}>
            <Link to={`/user/${id}`} data-testid={`user-${id}`}>
              User{id}
            </Link>
          </div>
        ))}
      // Setup routes with route paramaters as needed
      <Switch>
        <Route exact={true} path="/">
          <Home />
        </Route>
        <Route path="/user/:userId">
          <UserProfile />
        </Route>
        <Route path="/user/new">
          <NewUser />
        </Route>
        <Route>
          <NoMatch />
        </Route>
      </Switch>

    </div>
  );
}

【问题讨论】：

标签： reactjs compiler-errors

【解决方案1】：

Link 组件在需要访问的路由之前在路由器上下文中定义后使用（在组件层次结构更高的某个地方）。因此，我认为您可能必须在 <App /> 的父组件中定义路由设置，因为无法正确推断路由上下文。

【讨论】：

路由器已添加到 index.js。
@HajerThabet 我知道路由器已经在 index.js 文件中声明。我的意思是你必须将你的 Switch 和 Route 组件也从 <App /> 移动到它的父级，我猜是 index.js 文件
我找到了解决方案。我必须把放在之前。谢谢你的帮助。
@hajerthabet 很高兴听到您解决了这个问题。我想如果你可能在这个线程下发布一个单独的答案并将其标记为已接受，这样它可能会帮助其他可能遇到同样问题的人。

【解决方案2】：

我认为错误来自 Array(10).fill() 表达式。你可以通过修改这个表达式再试一次吗？对我来说 Array(10).fill() 返回 undefined。如果要生成元素 1 到 10 的 Array，请改用以下 sn-p。

[...Array(10).keys()] 
//=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

或

Array.from(Array(10).keys())
//=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

【讨论】：

我尝试了您的解决方案。不幸的是，它没有用。