create-react-app 错误无法解决：Uncaught TypeError: Cannot read properties of undefined (reading \'pathname\')答案

【问题标题】：create-react-app errors not able to solve: Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')create-react-app 错误无法解决：Uncaught TypeError: Cannot read properties of undefined (reading \'pathname\')
【发布时间】：2022-08-14 22:57:17
【问题描述】：

我已经尝试了互联网上所有可用的解决方案，但我无法解决这些错误。请帮我。面临以下错误：

警告：列表中的每个孩子都应该有一个唯一的“key”道具。

检查Home的渲染方法。请参阅https://reactjs.org/link/warning-keys 了解更多信息。在 tr 在家里（http://localhost:3000/static/js/bundle.js:679:75）在路线 (http://localhost:3000/static/js/bundle.js:43822:5) 在 div 在路由器 (http://localhost:3000/static/js/bundle.js:43755:15) 在 BrowserRouter (http://localhost:3000/static/js/bundle.js:42564:5) 在应用程序
未捕获的类型错误：无法读取未定义的属性（读取 \'pathname\'）

在 resolveTo (router.ts:549:1) 在 hooks.tsx:252:1 在 mountMemo (react-dom.development.js:17225:1) 在 Object.useMemo (react-dom.development.js:17670:1) 在 useMemo (react.development.js:1650:1) 在 useResolvedPath (hooks.tsx:252:1) 在 useHref (hooks.tsx:40:1) 在 LinkWithRef (index.tsx:267:1) 在 renderWithHooks (react-dom.development.js:16305:1) 在 updateForwardRef (react-dom.development.js:19226:1)
上述错误发生在组件中：在 LinkWithRef (http://localhost:3000/static/js/bundle.js:42666:5) 在 td 在 tr 在身体在餐桌上在 div 在 div 在家里（http://localhost:3000/static/js/bundle.js:679:75）在路线 (http://localhost:3000/static/js/bundle.js:43822:5) 在 div 在路由器 (http://localhost:3000/static/js/bundle.js:43755:15) 在 BrowserRouter (http://localhost:3000/static/js/bundle.js:42564:5) 在应用程序
未捕获的类型错误：无法读取未定义的属性（读取 \'pathname\'）

在 resolveTo (router.ts:549:1) 在 hooks.tsx:252:1 在 mountMemo (react-dom.development.js:17225:1) 在 Object.useMemo (react-dom.development.js:17670:1) 在 useMemo (react.development.js:1650:1) 在 useResolvedPath (hooks.tsx:252:1) 在 useHref (hooks.tsx:40:1) 在 LinkWithRef (index.tsx:267:1) 在 renderWithHooks (react-dom.development.js:16305:1) 在 updateForwardRef (react-dom.development.js:19226:1)

未捕获的类型错误：无法读取未定义的属性（正在读取 \'pathname\'）

在 resolveTo (router.ts:549:1) 在 hooks.tsx:252:1 在 mountMemo (react-dom.development.js:17225:1) 在 Object.useMemo (react-dom.development.js:17670:1) 在 useMemo (react.development.js:1650:1) 在 useResolvedPath (hooks.tsx:252:1) 在 useHref (hooks.tsx:40:1) 在 LinkWithRef (index.tsx:267:1) 在 renderWithHooks (react-dom.development.js:16305:1) 在 updateForwardRef (react-dom.development.js:19226:1)

这是我的代码：

应用程序.js：

            import \"../node_modules/bootstrap/dist/css/bootstrap.css\";
            import Navbar from \"./component/layout/Navbar\";
            import About from \"./component/pages/About\";
            import Contact from \"./component/pages/Contact\";
            import Home from \"./component/pages/Home\";
            import NotFound from \"./component/pages/NotFound\";
            import React from \"react\";
            import \"./App.css\";
            import AddUser from \"./component/users/AddUser\";
            import EditUser from \"./component/users/EditUser\";
            import User from \"./component/users/User\";
            import { BrowserRouter as Router, Route, Routes } from \"react-router-dom\";
            
            function App(props) {
              return (
                <Router>
                  <div className=\"App\">
                    <Navbar />
                    <Routes>
                      <Route path=\"/\" element={<Home />} />
                      <Route path=\"/about\" element={<About />} />
                      <Route path=\"/contact\" element={<Contact />} />
                      <Route path=\"/users/add\" element={<AddUser />} />
                      <Route path=\"/users/edit/:id\" element={<EditUser />} />
                      <Route path=\"/users/:id\" element={<User />} />
                      <Route path=\"*\" element={<NotFound />} />
                    </Routes>
                  </div>
                </Router>
              );
            }
            
            export default App;

    Home.js:
    
    import React, { useState, useEffect } from \"react\";
    import axios from \"axios\";
    import { Link } from \"react-router-dom\";
    
    const Home = () => {
      const [users, setUser] = useState([]);
    
      useEffect(() => {
        loadUsers();
      }, []);
    
      const loadUsers = async () => {
        const result = await axios.get(\"http://localhost:3001/users\");
        setUser(result.data.reverse());
      };
    
      const deleteUser = async (id) => {
        await axios.delete(`http://localhost:3001/users/${id}`);
        loadUsers();
      };
    
      return (
        <div className=\"container\">
          <div className=\"py-4\">
            <h1>Home Page</h1>
            <table className=\"table border shadow\">
              <thead className=\"thead-dark\">
                <tr>
                  <th scope=\"col\">#</th>
                  <th scope=\"col\">Name</th>
                  <th scope=\"col\">User Name</th>
                  <th scope=\"col\">Email</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                {users.map((user, index) => (
                  <tr>
                    <th scope=\"row\">{index + 1}</th>
                    <td>{user.name}</td>
                    <td>{user.username}</td>
                    <td>{user.email}</td>
                    <td>
                      <Link
                        className=\"btn btn-primary mr-2\"
                        to={`/users/${user.id}`}
                      >
                        View
                      </Link>
                      <Link
                        className=\"btn btn-outline-primary mr-2\"
                        to={`/users/edit/${user.id}`}
                      >
                        Edit
                      </Link>
                      <Link
                        className=\"btn btn-danger\"
                        onClick={() => deleteUser(user.id)}
                      >
                        Delete
                      </Link>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      );
    };
    
    export default Home;

About.js:

    import React from \"react\";

const About = () => {
  return (
    <div className=\"container\">
      <div className=\"py-4\">
        <h1>About Page</h1>
        <p className=\"lead\">
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cumque rerum
          hic ab veniam reiciendis cum repudiandae, voluptate explicabo nesciunt
          nam accusantium? Soluta cupiditate, accusamus commodi praesentium
          laborum dolorum libero maiores!
        </p>

        <p className=\"lead\">
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cumque rerum
          hic ab veniam reiciendis cum repudiandae, voluptate explicabo nesciunt
          nam accusantium? Soluta cupiditate, accusamus commodi praesentium
          laborum dolorum libero maiores!
        </p>
        <p className=\"lead\">
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cumque rerum
          hic ab veniam reiciendis cum repudiandae, voluptate explicabo nesciunt
          nam accusantium? Soluta cupiditate, accusamus commodi praesentium
          laborum dolorum libero maiores!
        </p>
      </div>
    </div>
  );
};

export default About;

Contact.js:

    import React from \"react\";

const Contact = () => {
  return (
    <div className=\"container\">
      <div className=\"py-4\">
        <h1>Contact Page</h1>
        <form>
          <div className=\"form-group\">
            <label for=\"exampleInputEmail1\">Email address</label>
            <input
              type=\"email\"
              className=\"form-control\"
              id=\"exampleInputEmail1\"
              aria-describedby=\"emailHelp\"
            />
            <small id=\"emailHelp\" className=\"form-text text-muted\">
              We\'ll never share your email with anyone else.
            </small>
          </div>
          <div className=\"form-group\">
            <label for=\"exampleInputPassword1\">Password</label>
            <input
              type=\"password\"
              className=\"form-control\"
              id=\"exampleInputPassword1\"
            />
          </div>
          <div className=\"form-group form-check\">
            <input
              type=\"checkbox\"
              className=\"form-check-input\"
              id=\"exampleCheck1\"
            />
            <label className=\"form-check-label\" for=\"exampleCheck1\">
              Check me out
            </label>
          </div>
          <button type=\"submit\" className=\"btn btn-primary\">
            Submit
          </button>
        </form>
      </div>
    </div>
  );
};

export default Contact;

User.js: 

    import React, { useState, useEffect } from \"react\";
import { Link, useParams } from \"react-router-dom\";
import axios from \"axios\";

const User = () => {
  const [user, setUser] = useState({
    name: \"\",
    username: \"\",
    email: \"\",
    phone: \"\",
    webiste: \"\",
  });
  const { id } = useParams();
  useEffect(() => {
    loadUser();
  }, []);
  const loadUser = async () => {
    const res = await axios.get(`http://localhost:3001/users/${id}`);
    setUser(res.data);
  };
  return (
    <div className=\"container py-4\">
      <Link className=\"btn btn-primary\" to=\"/\">
        back to Home
      </Link>
      <h1 className=\"display-4\">User Id: {id}</h1>
      <hr />
      <ul className=\"list-group w-50\">
        <li className=\"list-group-item\">name: {user.name}</li>
        <li className=\"list-group-item\">user name: {user.username}</li>
        <li className=\"list-group-item\">email: {user.email}</li>
        <li className=\"list-group-item\">phone: {user.phone}</li>
        <li className=\"list-group-item\">website: {user.website}</li>
      </ul>
    </div>
  );
};

export default User;

EditUser.js:

    import React, { useState, useEffect } from \"react\";
import axios from \"axios\";
import { useNavigate, useParams } from \"react-router-dom\";

const EditUser = () => {
  let history = useNavigate();
  const { id } = useParams();
  const [user, setUser] = useState({
    name: \"\",
    username: \"\",
    email: \"\",
    phone: \"\",
    website: \"\",
  });

  const { name, username, email, phone, website } = user;
  const onInputChange = (e) => {
    setUser({ ...user, [e.target.name]: e.target.value });
  };

  useEffect(() => {
    loadUser();
  }, []);

  const onSubmit = async (e) => {
    e.preventDefault();
    await axios.put(`http://localhost:3001/users/${id}`, user);
    history.push(\"/\");
  };

  const loadUser = async () => {
    const result = await axios.get(`http://localhost:3001/users/${id}`);
    setUser(result.data);
  };
  return (
    <div className=\"container\">
      <div className=\"w-75 mx-auto shadow p-5\">
        <h2 className=\"text-center mb-4\">Edit A User</h2>
        <form onSubmit={(e) => onSubmit(e)}>
          <div className=\"form-group\">
            <input
              type=\"text\"
              className=\"form-control form-control-lg\"
              placeholder=\"Enter Your Name\"
              name=\"name\"
              value={name}
              onChange={(e) => onInputChange(e)}
            />
          </div>
          <div className=\"form-group\">
            <input
              type=\"text\"
              className=\"form-control form-control-lg\"
              placeholder=\"Enter Your Username\"
              name=\"username\"
              value={username}
              onChange={(e) => onInputChange(e)}
            />
          </div>
          <div className=\"form-group\">
            <input
              type=\"email\"
              className=\"form-control form-control-lg\"
              placeholder=\"Enter Your E-mail Address\"
              name=\"email\"
              value={email}
              onChange={(e) => onInputChange(e)}
            />
          </div>
          <div className=\"form-group\">
            <input
              type=\"text\"
              className=\"form-control form-control-lg\"
              placeholder=\"Enter Your Phone Number\"
              name=\"phone\"
              value={phone}
              onChange={(e) => onInputChange(e)}
            />
          </div>
          <div className=\"form-group\">
            <input
              type=\"text\"
              className=\"form-control form-control-lg\"
              placeholder=\"Enter Your Website Name\"
              name=\"website\"
              value={website}
              onChange={(e) => onInputChange(e)}
            />
          </div>
          <button className=\"btn btn-warning btn-block\">Update User</button>
        </form>
      </div>
    </div>
  );
};

export default EditUser;

AddUser.js:

    import React, { useState } from \"react\";
import axios from \"axios\";
import { useNavigate } from \"react-router-dom\";

const AddUser = () => {
  let history = useNavigate();
  const [user, setUser] = useState({
    name: \"\",
    username: \"\",
    email: \"\",
    phone: \"\",
    website: \"\",
  });

  const { name, username, email, phone, website } = user;
  const onInputChange = (e) => {
    setUser({ ...user, [e.target.name]: e.target.value });
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    await axios.post(\"http://localhost:3001/users\", user);
    history.push(\"/\");
  };
  return (
    <div className=\"container\">
      <div className=\"w-75 mx-auto shadow p-5\">
        <h2 className=\"text-center mb-4\">Add A User</h2>
        <form onSubmit={(e) => onSubmit(e)}>
          <div className=\"form-group\">
            <input
              type=\"text\"
              className=\"form-control form-control-lg\"
              placeholder=\"Enter Your Name\"
              name=\"name\"
              value={name}
              onChange={(e) => onInputChange(e)}
            />
          </div>
          <div className=\"form-group\">
            <input
              type=\"text\"
              className=\"form-control form-control-lg\"
              placeholder=\"Enter Your Username\"
              name=\"username\"
              value={username}
              onChange={(e) => onInputChange(e)}
            />
          </div>
          <div className=\"form-group\">
            <input
              type=\"email\"
              className=\"form-control form-control-lg\"
              placeholder=\"Enter Your E-mail Address\"
              name=\"email\"
              value={email}
              onChange={(e) => onInputChange(e)}
            />
          </div>
          <div className=\"form-group\">
            <input
              type=\"text\"
              className=\"form-control form-control-lg\"
              placeholder=\"Enter Your Phone Number\"
              name=\"phone\"
              value={phone}
              onChange={(e) => onInputChange(e)}
            />
          </div>
          <div className=\"form-group\">
            <input
              type=\"text\"
              className=\"form-control form-control-lg\"
              placeholder=\"Enter Your Website Name\"
              name=\"website\"
              value={website}
              onChange={(e) => onInputChange(e)}
            />
          </div>
          <button className=\"btn btn-primary btn-block\">Add User</button>
        </form>
      </div>
    </div>
  );
};

export default AddUser;

Navbar.js:

    import React from \"react\";
import { Link, NavLink } from \"react-router-dom\";

const Navbar = () => {
  return (
    <nav className=\"navbar navbar-expand-lg navbar-dark bg-primary\">
      <div className=\"container\">
        <Link className=\"navbar-brand\" to=\"/\">
          React App
        </Link>
        <button
          className=\"navbar-toggler\"
          type=\"button\"
          data-toggle=\"collapse\"
          data-target=\"#navbarSupportedContent\"
          aria-controls=\"navbarSupportedContent\"
          aria-expanded=\"false\"
          aria-label=\"Toggle navigation\"
        >
          <span className=\"navbar-toggler-icon\"></span>
        </button>

        <div className=\"collapse navbar-collapse\">
          <ul className=\"navbar-nav mr-auto\">
            <li className=\"nav-item\">
              <NavLink className=\"nav-link\" to=\"/\">
                Home
              </NavLink>
            </li>
            <li className=\"nav-item\">
              <NavLink className=\"nav-link\" to=\"/about\">
                About
              </NavLink>
            </li>
            <li className=\"nav-item\">
              <NavLink className=\"nav-link\" to=\"/contact\">
                Contact
              </NavLink>
            </li>
          </ul>
        </div>

        <Link className=\"btn btn-outline-light\" to=\"/users/add\">
          Add User
        </Link>
      </div>
    </nav>
  );
};

export default Navbar;

package.json:

    {
  \"name\": \"mycrudapp\",
  \"version\": \"0.1.0\",
  \"private\": true,
  \"dependencies\": {
    \"@testing-library/jest-dom\": \"^5.16.5\",
    \"@testing-library/react\": \"^13.3.0\",
    \"@testing-library/user-event\": \"^13.5.0\",
    \"axios\": \"^0.27.2\",
    \"bootstrap\": \"^5.2.0\",
    \"concurrently\": \"^7.3.0\",
    \"json-server\": \"^0.17.0\",
    \"react\": \"^18.2.0\",
    \"react-dom\": \"^18.2.0\",
    \"react-router-dom\": \"^6.3.0\",
    \"react-scripts\": \"5.0.1\",
    \"web-vitals\": \"^2.1.4\"
  },
  \"scripts\": {
    \"start\": \"react-scripts start\",
    \"json-server\": \"json-server --watch db.json --port 3001\",
    \"start:dev\": \"concurrently \\\"npm start\\\" \\\"npm run json-server\\\"\",
    \"build\": \"react-scripts build\",
    \"test\": \"react-scripts test\",
    \"eject\": \"react-scripts eject\"
  },
  \"eslintConfig\": {
    \"extends\": [
      \"react-app\",
      \"react-app/jest\"
    ]
  },
  \"browserslist\": {
    \"production\": [
      \">0.2%\",
      \"not dead\",
      \"not op_mini all\"
    ],
    \"development\": [
      \"last 1 chrome version\",
      \"last 1 firefox version\",
      \"last 1 safari version\"
    ]
  }
}

您可以尝试将代码减少到最低限度吗？ IE。应该足以得到错误。
我已经上传了所有代码..我是初学者..不明白如何减少:(

标签： javascript reactjs react-hooks create-react-app

【解决方案1】：

警告：列表中的每个孩子都应该有一个唯一的“关键”道具。

因此，当您有一个 map 函数并且它附加的每个子项都没有唯一键时，就会出现此警告。假设您要附加一个列表，因此只需向每个数据列表添加一个键即可解决您的问题。这是示例

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number,id) =>
   <li key={id} >{number}</li> 
);

所以在你的主页地图功能中添加上面的键。

未捕获的类型错误：无法读取未定义的属性（读取“路径名”）

当我们没有设置至支持 React 路由器中的 Link 组件，因此请检查您是否错过了一个

此外，如果您使用 v6 的 react-router，请执行这样的嵌套路由，将所有用户的路由绑定在一个用户路由下，这样会使它更具可读性。

<Route path="users">
    <Route path="add" element={<AddUser />} />
    <Route path=":id" element={<User />} />
    <Route path="edit/:id" element={<EditUser />} />
<Route/>

【讨论】：

无法找到 2,4 & 5 错误的原因..请帮我找出..请:(((
不工作...
看看这是否有效尝试在你的 app.js 中添加这个 const { createMemoryHistory } = require("history"); // 在顶部 const history = createMemoryHistory(); //app下 <Router location={history.location} navigator={history}> //在router中添加location和navigator
尝试在 app.js 中添加这个 const { createMemoryHistory } = require("history"); // 在最上面导入 const history = createMemoryHistory(); // 在状态所在的 app 函数下 <Router location={history.location} navigator={history}/> // 用这两个变量像这样更新你的路由器

【解决方案2】：

用这个解决错误＃1：

{
    users.map((user, index) => {
        return (
            <tr key={index}>
                ...
            </tr>
        );
    });
}

错误 #2 和 #4 相同。仔细检查您对 react-router-dom 中的 Link 元素的使用，因为从 v5 到 v6 存在重大更改。这也可能有帮助：TypeError: Cannot read properties of undefined (reading 'pathname')

【讨论】：

错误1已成功解决..请帮助我解决其他问题...我不明白该怎么做..我已经检查了您提供的链接，它没有帮助...请帮助我..我有上传所有代码。 @andy
编辑答案以包括return(<tr>...</tr>); 还要注意花括号与括号。