标签: react-router-dom

所以我收到一条错误消息 - TypeError: Cannot readproperties of undefined (reading 'params')

TypeError: Cannot read properties of undefined (reading 'params')
       5 | import products from '../products'
       6 | 
       7 | function ProductScreen({ match }) {
       8 |     const product = products.find((p) => p._id == match.params.id)
       9 |     return (
      10 |         <div>
      11 |             {product.name}

这是我的 ProductScreen.js 文件，导致出现问题

import React from 'react'
import { Link } from 'react-router-dom'
import { Row, Col, Image, ListGroup, Button, Card } from 'react-bootstrap'
import Rating from '../components/Rating' …

我有一个应用程序，有时会加载查询字符串 param t。

一开始，我希望应用程序读取此参数（如果可用）并将其从 URL 中删除。

在根组件上，我正在这样做：

    const [searchParams, setSearchParams] = useSearchParams();

    if (searchParams.has('t')) {
        const token = searchParams.get('t');
        if (token) {
            searchParams.delete('t');
            const newParams: {[key: string]: string} = {};
            searchParams.forEach((value: string, key: string) => {
                newParams[key] = value;
            });
            console.log('setting params: ');
            console.dir(newParams);
            setSearchParams(newParams);
            AuthController.setAccessToken(token);
        }
    }

我看到它正确读取 paramt并且 newParams 对象为空或仅包含其他参数，但由于某种原因setSearchParams(newParams)似乎没有执行任何操作。参数t仍然在 URL 中。

我怎样才能让它从 URL 中删除这个参数？

我正在尝试为其父路由中的一个子路由创建索引路由，但我不断收到错误消息，提示类型“true”不可分配给类型“false |” 不明确的'。我如何解决它？

<Routes>
  <Route path="/" element={<Profile />}>
    <Route index path="/username" element={<ProfileDetails />} />
    <Route path="settings/profile" element={<EditProfile />} />
  </Route>
  <Route path="/login" element={<Login />} />
  <Route path="/register" element={<SignUp />} />
</Routes>

如何设置 React Router 6 以在导航和刷新浏览器窗口时恢复滚动位置？

React Router 5 有一个关于滚动恢复的页面，但我在v6 的文档中找不到任何有关滚动的内容，所以我猜你应该用另一个包自己处理这个问题。很公平，但我找不到任何与 React Router 6 兼容的东西。

包react-scroll-restoration和oaf-react-router需要v5。（oaf-react-router 确实列出了它支持 v6，但基本使用代码示例与 v6 不兼容，相关问题 #210仍然处于开放状态。）

Gatsby 和 Next.js 支持开箱即用的滚动恢复，但我看起来没有一个可以直接使用的整齐打包的包。

这个带有服务器端渲染页面的小演示应用程序可以满足我的需求。当来回导航并刷新浏览器窗口时，滚动位置会恢复。

这是使用 React Router 6 的同一个应用程序，其中滚动位置不会保存和恢复，但实际上在页面之间重用。通常的解决方法是每当导航页面时滚动到顶部，但我对这种行为不感兴趣。

编辑：React Query 写道，滚动恢复的问题是页面正在重新获取数据，这意味着如果用于渲染页面的数据存在，则滚动恢复就可以工作。我无法确认这一点，因为我的小型 React Router 6 应用程序即使根本没有进行任何数据获取也存在问题。我觉得为了让它发挥作用，我缺少一些小东西。

Rant：令我感到非常惊讶的是，这个问题的典型答案是在导航时打电话window.scrollTo(0, 0)。这仅解决了页面之间滚动位置转移的问题。当滚动位置未恢复时，在页面之间导航时的用户体验会严重恶化。我想这就是弹出窗口变得如此流行的部分原因，但它们带来了一系列其他用户体验问题，所以我真的想避免使用它们。

我正在构建一个 Netflix 克隆应用程序，并用于react-router-dom v5在不同页面之间切换。但是，当我单击Link中的标签时Navbar.jsx，URL 会发生变化，但相应的组件不会呈现。我查阅了很多关于这个主题的StackOverflow 帖子，但是，我无法让它工作。下面是代码。请帮助我，因为我已经被困在这个问题上三天了。

/series当导航到from时，它应该显示什么/：

它实际上显示了什么：

1. 索引.js

import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

const container = document.getElementById("root");
const root = createRoot(container);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

2. 应用程序.jsx

import React from "react";

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import "./app.scss";
import Home from "./pages/home/Home";
import Watch from "./pages/watch/Watch";

const App = () => {
  return …

PrivateRoute在我的react.js项目中集成HOC时,我完全陷入困境.

这是我的路线文件

import React, { Component } from "react";
import { Route, Redirect, Switch, BrowserRouter as Router } from 'react-router-dom';
import Dashboard from "../view/Dashboard/Dashboard";
import Login from "../view/Login/Login";
import Admin from "../view/UserManagement/Admin";
import cookie from 'react-cookies'

const PrivateRoute = ({ component, ...rest }) => {
  const isAuthed = cookie.load('token')
  console.log(isAuthed, 'dddddddddddddddddddd')
  return (
    <Route {...rest} exact
      render = {(props) => (
        isAuthed ? (
          <div>
            {React.createElement(component, props)}
          </div>
        ) :
        (
          <Redirect
            to={{
              pathname: '/login',
              state: { …