小编Dre*_*ese的帖子

为了检索当前的查询参数，我使用这个：

import { useLocation } from 'react-router-dom';

function useQuery() {
    return new URLSearchParams(useLocation().search);
}

然后在功能组件中：

const query = useQuery();

Link但是，除了具有新值的查询参数之外，我没有找到任何集成的解决方案可以轻松设置为相同的查询参数。

到目前为止，这是我的解决方案：

const filterLink = query => param => value => {
  const clone = new URLSearchParams(query.toString());
  clone.set(param, value);
  return `?${clone.toString()}`;
}

return (
  <>
    <Link to={filterLink(query)('some-filter')('false')}>False</Link>
    <Link to={filterLink(query)('some-filter')('true')}>True</Link>
  </>
)

我必须克隆该query对象，以免改变原始对象，并且filterLink在 JSX 中多次调用时不会产生不需要的副作用。我还必须自己添加问号，因为URLSearchParams.prototype.toString()不添加它。

我想知道为什么我必须自己这样做？我真的不喜欢在使用框架时做如此低级的事情。我错过了反应路由器中的某些东西吗？是否有更常见的做法可以满足我的需要？

如何过滤getByLabelText查询，如果它抛出类型错误：TestingLibraryElementError: Found multiple elements with the text of: /to/i，我有以下 HTML 结构，其中有一些嵌套标签：

当前的 HTML 结构

<div class="ant-row ant-form-item ant-radio-group-cards" style="row-gap: 0px;">
    <div class="ant-col ant-form-item-label">
        <!-- <label> with "To" text -->
        <label for="transferFunds_to" class="ant-form-item-required" title="To">To</label> 
    </div>
    <div class="ant-col ant-form-item-control">
        <div class="ant-form-item-control-input">
            <div class="ant-form-item-control-input-content">
                <!-- Other <label> with "To" text here -->
                <label class="ant-radio-button-wrapper">
                    <span class="ant-radio-button"><input id="transferFunds_to" type="radio" class="ant-radio-button-input" value="" /><span class="ant-radio-button-inner"></span></span>
                    <span>
                        <li class="ant-list-item">
                            <div class="ant-list-item-meta">
                                <div class="ant-list-item-meta-avatar">
                                    <svg width="1em" height="1em" viewBox="0 0 16 16" fill="none" style="font-size: 48px;"></svg> …

在我的主页中，我有类似这样的代码

{selectedTab===0 && <XList allItemList={some_list/>}
{selectedTab===1 && <YList allItemList={some_list2/>}

现在，在 XList 中，我有这样的内容：

{props.allItemList.map(item => <XItem item={item}/>)}

现在，在 XItem 内部，我调用 api 来获取 XItem 的图像。

现在我的问题是，当在主页中，我将选项卡从 0 切换到 1 或 1 切换到 0 时，它再次调用 XItem 中的所有 API。每当我切换选项卡时，它都会再次调用 api。我不想要这样。我已经在 XItem 中使用了 useEffect，并使用 [] 数组作为第二个参数。

我有我的后端代码，我在其中创建了一个 api 来获取 XItem 的图像。API直接返回图像而不是url，所以我不能一次调用所有api。

我需要一些解决方案，以便最大限度地减少 api 调用。感谢帮助。

我需要将状态从 useState 挂钩传递到另一个组件，但它们之间的唯一连接是一个具有 onClick 历史记录函数的按钮。推（路线）。

表页面（从该页面我必须将状态发送到下面的 TableMore 页面）

import React, { useState, useEffect } from "react";\nimport { useTable, usePagination } from "react-table";\nimport { useHistory } from "react-router-dom";\nimport styled from "styled-components";\nimport apiRequest from "helpers/apiRequest";\nimport Header from "../../../components/Header/Header";\n\nfunction Table({ columns, data, searchData, setsearchData, getData }) {\n  // Use the state and functions returned from useTable to build your UI\n  const {\n    getTableProps,\n    getTableBodyProps,\n    headerGroups,\n    prepareRow,\n    page, // Instead of using 'rows', we'll use page,\n    // which has only the rows …

在我的 React 应用程序中，我有一个 .env 文件，每次更改它们时，我都看不到更改，直到我停止并再次 npm start 是否有更快的方法？

正在努力学习测试。使用测试库、Jest、React-Router v6 和 Typescript。我正在尝试找出如何测试链接。我一直在到处寻找解决方案，但找不到。使用 React-Router v6。代码如下所示（链接只是带有 href 的常规元素），只是想确保用户到达新页面（在本例中是来自忘记密码页面的登录页面）。

//omitted imports but imported all appropriate items from below

describe('ForgotPassword', () => {
  test('User can navigate to login screen', async () => {
    render(
      <MemoryRouter initialEntries={['/forgot-password' ]}>
        <ForgotPassword />
      </MemoryRouter>)

    userEvent.click(screen.getByRole('link', { name: 'Back to Login' }))

    await waitFor(() => {
      expect(screen.getByRole('heading', { name: 'Login' })).toBeInTheDocument()
    })
  })

//also tried:

describe('ForgotPassword', () => {
  test('User can navigate to login screen', async () => {
    render(
      <MemoryRouter initialEntries={['/forgot-password' ]}>
        <Routes>
            <Route path='/forgot-password' component={<ForgotPassword …

我是一个反应初学者，刚刚开始主题react-router-dom教程。首先，我使用安装了react-router-dom， npm i react-router-dom 然后在app.js中，我使用函数标头中的默认代码，并在react-router-dom结构中调用此元素：

import logo from './logo.svg';
import './App.css';
import {  BrowserRouter as Router,Routes,Route} from "react-router-dom";

function App() {
  return (
    <Router>
    <Routes>
      <Route path="/" element={<Header />} />
    </Routes>
  </Router>
  );
}
export default App;
function Header(){
  return(
    <div className="App">
  <header className="App-header">
    <img src={logo} className="App-logo" alt="logo" />
    <p>Edit <code>src/App.js</code> and save to reload.</p>
    <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
      Learn React
    </a>
  </header>
</div>
  );
  
}

当我使用启动服务器时npm start出现此错误：

log.js:59 Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js): …

我是反应初学者。我正在尝试设置路由器和渲染来更改页面，但它给了我我无法理解的错误。

我已经安装到npm install react-router-dom 我的终端index.js我已经导入BrowserRouter并嵌入了我的应用程序

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from "react-router-dom"

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);
reportWebVitals();

在我的文件中，app.js我有从 导入路由开关react-router-dom。

import Home from './page/home';
import Authentication from "./page/authentication";
import Header from './componenti/header';
import './App.css';
import DashboardComponent from './page/dashboardComponent';
import {Route, Switch} from "react-router-dom"

function App(props) {
  return (
    <div>
      <Header/>
      <Switch>        
          <Route …

我有一个关于 React 渲染行为的问题。如果我错了，请纠正我，我是 React 和 Web 开发的新手。

据我所知，React SPA 的默认渲染发生在客户端，对吧？

所以这意味着 src 目录中的整个 JSX 代码将在第一次访问页面时下载（参见 Chrome WebDeveloper Tools Source 选项卡的图片），对吗？

假设我将开发一个管理区域，只有授权用户才能访问，例如通过 JWT，JS 代码仍然包含有关管理区域的信息，即使没有渲染，具有相应知识的人也可以访问该管理区域因为有关管理区域的所有信息都已下载到客户端计算机，对吗？

当然，我可以通过 api 和 JWT 令牌保护敏感数据，但是如果我不想让客户端知道管理区域内容怎么办？对于某种这种情况，是否有最佳实践，例如客户端（默认用户内容）和服务器端（管理区域内容）渲染的混合？最好的方法是什么？客户端/服务器端渲染的优点和缺点是什么？

谢谢&&请友善，正如已经提到的，我了解 React 和 WebDev &&抱歉我的英语，我会努力不断改进它。

我想制作路由数组并将其应用到来自react-router@6的useRoutes上。目前我使用的是 typescript 和 vite。但是，当尝试将我的组件分配给“元素”键时，我遇到了错误。

type HelloWorld = / unresolved / any
'HelloWorld' 引用一个值，但在这里被用作类型。您的意思是“typeof HelloWorld”吗？ts(2749)
解析错误：“>”expected.eslint

import { useRoutes, RouteObject } from "react-router-dom"

import { HelloWorld } from "@/HelloWorld"

export function Router (): ReturnType<typeof useRoutes> {
  const routes: RouteObject[] = [
    {
      path: "hello-world",
      element: <HelloWorld />
    }
  ]

  return useRoutes(routes)
}