小编Dre*_*ese的帖子

我目前正在使用react-router-dom v6 开发一个React 项目，我想获取所有查询参数。

http://localhost:3000/users?page=5&pageSize=25

我想同时获取页面和页面大小。我知道我们可以使用下面的代码来获取带有键的参数。

import React from 'react'
import {useSearchParams} from "react-router-dom";

const Users = () => {

  const [searchParams, setSearchParams] = useSearchParams();

  const page = searchParams.get('page')
  const pageSize = searchParams.get('pageSize')


  return (<h1>page: {page}, pageSize: {pageSize}</h1>)
}

但是，然后我尝试通过使用获取所有参数而不指定键，searchparams.getAll()但它不起作用，React 应用程序仅显示一个空白页面。

这是我用来获取所有参数的代码：

import React from 'react'
import {useSearchParams} from "react-router-dom";

const Users = () => {

  const [searchParams, setSearchParams] = useSearchParams();

  const params = searchParams.getAll();

  console.log(params)

  return (<h1>params</h1>)
}

我在那里犯了什么错误吗？

这是我的依赖package.json：

  "dependencies": {
    ...,
    "react": "^17.0.2", …

如何使用 localStorage 创建受保护的路由并将react-router-dom响应存储在 localStorage 中，以便当用户下次尝试打开时可以再次查看其详细信息。登录后，他们应该重定向到仪表板页面。

所有功能都添加到 ContextApi 中。Codesandbox 链接：代码

我尝试过但没能实现

路线页面

import React, { useContext } from "react";
import { globalC } from "./context";
import { Route, Switch, BrowserRouter } from "react-router-dom";
import About from "./About";
import Dashboard from "./Dashboard";
import Login from "./Login";
import PageNotFound from "./PageNotFound";

function Routes() {
  const { authLogin } = useContext(globalC);
  console.log("authLogin", authLogin);

  return (
    <BrowserRouter>
      <Switch>
        {authLogin ? (
          <>
            <Route path="/dashboard" component={Dashboard} exact />
            <Route exact path="/About" component={About} /> …

为什么 React router v6 useParams返回属性可能为“未定义”的对象？

在下面的代码中，我的 IDE 指示const slug: string | undefined.

const { slug } = useParams<"slug">();

这是因为Params类型定义：

/**
 * The parameters that were parsed from the URL path.
 */
export type Params<Key extends string = string> = {
  readonly [key in Key]: string | undefined;
};

但为什么不Params这样定义（没有| undefined）：

export type Params<Key extends string = string> = {
  readonly [key in Key]: string;
};

如果带有参数的路由与 URL 匹配，则该参数不能为undefined。那么，有没有 …

我在编写代码来呈现没有导航栏和侧边栏的登录页面时遇到问题。我遇到过一些提出类似问题的页面，但似乎都不适合我目前的情况。

如何在 React Router 的登录页面中隐藏导航栏 给出的示例很棒，但我相信完成相同任务的方式已经随着 React-router-dom v6 的改变而改变，这让我在https://dev.to/中阅读了有关此更改的信息iamandrewluca/private-route-in-react-router-v6-lg5

看来我不理解有关 React Router 路由的某些方面。在下面的代码中我有两条路线。我希望在没有导航栏和侧栏组件的情况下渲染路线之一（登录）。

const App = () => {
  return (
    <>
      <Routes>
        <Route path="/login" element={<LoginPage />} />
      </Routes>

      <NavBar />
      <SideBar />
      <main className={styles["main--container"]}>
        <div className={styles["main--content"]}>
          <Routes>
            <Route path="/" element={<Dashboard />} />
          </Routes>
        </div>
      </main>
    </>
  );
};

我也尝试过的另一种选择是将导航栏和侧栏标签移到仪表板组件中，但随后我基本上必须对任何新组件进行相同的复制和粘贴。这种方法感觉错误且效率低下，但如果这是正确的方法，我会做必要的事情

编辑：我认为重要的是包括它当前所做的事情是加载包含导航栏和侧边栏的登录页面。导航到仪表板组件有导航栏和侧边栏，但这是有意的。我想要的是登录页面没有导航栏和侧边栏

我一直在寻找这个问题并找到了它，但他们正在使用类组件和 React router dom v5

我想要的是当用户单击浏览器后退按钮时我会将他们重定向到主页

我用 React js 构建了我的第一个渐进式 Web 应用程序(PWA)。当我在 DevTools 中的 Chrome 审核选项卡上单击“生成报告”时，它显示消息“灯塔正在预热”。

我的chrome版本是81。

我可以做什么来生成报告？

如何访问 React 组件中的 url 参数？

应用程序.js

<Route path="/question/:id" element={<QuestionView />} />

QuestionView.js

class QuestionView extends React.Component {     
    render() {
          const { questions, users } = this.props;
          const {id} = ??? 

我的应用程序工作正常，然后我将其更新为 React 18，现在，当我从一条路线导航到另一条路线时（如果当前路线使用 useEffect 在加载时调用某些 API），它会抛出“destroy is not a function”。我在这方面搜索过互联网，但每个问题都与此问题无关。也许反应 18 是新的，这就是为什么我找不到解决方案。尽管当我重新加载同一页面时，它加载得很好。就在我导航时应用程序崩溃了。如果我评论 useEffect 一切正常

这是我的 useEffect 代码

//on mount useEffect
  useEffect(async () => {
    getCases()
  }, []);

  //api calls functions ====>

  //get cases function
  const getCases = async () => {
    const response = await Get(CASES.get, token);
    setLoading(false);
    if (!response.error) {
      const { data } = response;
      setCases(data);
      console.log("fetched=======>", response);
    } else {
      setError(response.error);
      console.log("error====>", response);
    }
  };

这是我得到的错误

Uncaught TypeError: destroy is not a function
    at safelyCallDestroy (react-dom.development.js:22768:1)
    at …

我正在开发一个用于每页身份验证的 useUser Hook。我已经正常实现了 useUser 挂钩，因此重定向工作正常。但我收到上述错误。

中止获取路由组件：“/login”

我该如何修复 useUserHook 来解​​决它？

//useUser.tsx
const useUser = ({ redirectTo, redirectIfFound }: IParams) => {
  const { data, error } = useRequest("authed", isAuthed);

  const user = data?.data;
  const hasUser = user;

  useEffect(() => {
    if (!redirectTo) return;
    if (
      // If redirectTo is set, redirect if the user was not found.
      (redirectTo && !redirectIfFound && !hasUser) ||
      // If redirectIfFound is also set, redirect if the user was found
      (redirectIfFound && hasUser)
    ) {
      Router.push(redirectTo); …

我知道 React 测试库有一个使用 React 路由器进行测试的示例，但我无法让它工作（我想是因为我使用的是 React 路由器 V6）。

基本上，我需要路由器测试，因为我有使用 useParams() 来获取部分 url 的详细信息组件。没有它我无法渲染组件。

这是我让它工作的尝试（是的，该页面也需要 apollo，尽管它并不真正需要 redux）。

const AllTheProviders = ({children, initialRoutes}) => {
    return (
        <ApolloProvider client={client}>
            <Provider store={store}>
                <MemoryRouter>
                    {children}
                </MemoryRouter>
            </Provider>
        </ApolloProvider>
    );
}
const customRender = (ui, options) => render(ui, {wrapper: AllTheProviders, ...options})


beforeEach(() => {
    window.history.pushState({}, 'Test page',"/details/url-param-the-component-needs")
    customRender(<App/>);
});

毫不奇怪，但这不起作用。我假设 window.history.pushState() 不适用于 React Router V6。我尝试使用 useNavigate()，但这在组件之外不起作用。

如果有人对我如何使这项工作有任何想法。我将不胜感激。