小编Dre*_*ese的帖子

展览元素包含 9 个展览的表格。单击表格中的展览后，我想路由到展览页面（Exhibit1），目前正在尝试通过嵌套路由执行此操作。

在展览中我有<Link to='/exhibitions/exhibit1'> Exhibit1 </Link> ... <Outlet/>

单击链接时，Exhibit1 组件将呈现在表格下方。

如何隐藏父元素（Exhibitions）并路由到 Exhibit1 页面？

感谢所有指向解决方法的指针。

<Routes>
 <Route path='/' element={<Home/>}/>
 <Route path='/home' element={<Home/>}/>
 <Route path='/aboutUs' element={<AboutUs/>}/>

 <Route path='/exhibitions' element={<Exhibitions/>}> 
  <Route path='exhibit1' element={<Exhibit1/>}/>
 </Route>

 <Route path='/photographers' element={<Photographers/>}/>
 <Route path='/contact' element={<Contact/>}></Route> 
 <Route path='*' element={<Error/>}> </Route> 
</Routes>

我真的很难在 React Router 版本 6 中实现一些东西，这在版本 5 中相对简单。

我不仅希望在路由之间设置动画（由于最近对库的提交，现在终于可以在版本 6 中实现），还希望为嵌套路由设置动画。想想滑动页面中的滑动页面。

这是我迄今为止所拥有的 CodeSandbox。

我正在使用 Framer MotionAnimatePresence来检测退出动画。但是 React Router 希望重新设置父路由的动画，即使只是嵌套路由发生了变化。

正如您在CodeSandbox 演示中所看到的，路线动画正常，但是当单击“下一个嵌套页面”链接时，它还会重新动画整个页面，这不是我们想要的。我想要的是第 1 页保持静态，而其嵌套路线动画。显然，当您单击“下一页”时，整个页面应该有动画效果（从第 1 页移动到第 2 页）。但我似乎无法鱼与熊掌兼得。

有人能够做到这一点吗？图书馆和更广泛的网络上的抱怨表明这目前可能是不可能的？

我正在尝试将可选查询参数添加到路径末尾，因此 URL 将如下所示："/user/1/cars?makeYear=2020"或"/user/1/cars"。相关Route定义如下。我无法找到有关如何将可选查询参数添加到现有路径的指南。例如，以下内容不起作用：

<Route path="user" element={<UserScreen />}>
  <Route path=":id/makeYear?" element={<User/>} />
</Route>

在这里，我认为这<Route path=":id/makeYear?" element={<User/>} />将标记makeYear为可选参数，但不，不起作用。

然后我想我可以直接在组件中访问查询参数，因此假设 URL 是，我可以通过提供的 api"/user/1/cars?makeYear=2020"获取 URL 。但是，查询参数也不起作用，因为查询参数会立即从 URL 中删除（我猜是通过）。useLocationreact-router-domreact-router

我正在使用react-router-dom（6.2.2）。

我试图在执行惰性查询时发出使用来自另一个组件的缓存数据的请求。父组件（不是直接父组件，所以我不想通过 props 深入挖掘大型数据集）通过 RTK 进行惰性查询，如下所示：

const [getDocuments, { data: contractDocuments, isLoading, isFetching }] = useLazyGetContractDocumentsQuery();


// inside a fetch function
  getDocuments({
    prop1,
    prop2,
    prop3,
  });

然后子组件也做同样的事情

getDocuments({
  prop1,
  prop2,
  prop3,
}).unwrap().then(documents=>{
  console.log(documents);         
});

我已经验证了 props 是相同的，返回的数据是相同的，但在这两种情况下，每次在任一组件中调用它时，它都会访问 API 端点来获取数据。它永远不会从缓存中获取它。

文档似乎说惰性查询与常规 useQuery 不同，因为您选择何时调用。请参阅不同钩子的功能比较。但我无法与它们一起使用缓存。我是否误解了文档，错过了缓存规则的一些例外，或者有可能在另一个地方我以某种方式禁用了缓存？

顺便说一句，查询如下所示：

    getContractDocuments: builder.query<
      ContractDocument[],
      {
        prop1: string;
        prop2: string | null;
        prop3: string;
      }
    >({
      query: body => ({
        url: '/GetDocuments',
        body,
        method: 'POST',
      }),
      transformResponse: (response: ContractDocument[]) => {
        return response.map(d => ({
          ...d,
          showIconViewFileInNewWindows: extensions.has(`${d.type}`), …

我在我的网站上使用 Vite、React、React Router 和 TypeScript。我在运行生产构建时遇到问题，在开发模式下一切正常。

使用生产版本时，我的浏览器显示白色背景，并且在浏览器控制台中出现以下错误：

上面的链接将我带到第 70 行中的以下（缩小的？）源代码：

那么也许它与 React Router 有关？

但我不确定到底是什么导致了这个错误。因此，我将尽力在下面提供尽可能多的相关信息。

我运行时的结果npm run build：

包.json：

{
    "name": "frontend",
    "private": true,
    "version": "0.0.0",
    "type": "module",
    "scripts": {
        "start": "vite",
        "build": "tsc && vite build",
        "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
        "preview": "vite preview",
        "test": "jest"
    },
    "dependencies": {
        "@faker-js/faker": "^8.0.2",
        "@vitejs/plugin-react": "^4.0.3",
        "axios": "^1.4.0",
        "chart.js": "^4.3.0",
        "daisyui": "^3.1.7",
        "dayjs": "^1.11.9",
        "i18next": "^23.2.7",
        "i18next-browser-languagedetector": "^7.1.0",
        "lucide-react": "^0.258.0",
        "react": "^18.2.0",
        "react-chartjs-2": "^5.2.0",
        "react-dom": "^18.2.0",
        "react-i18next": "^13.0.1", …

我有一个使用 useState 初始化状态的功能组件，然后通过输入字段更改该状态。

然后，我有一个模拟 componentWillUnmount 的 useEffect 挂钩，以便在组件卸载之前，将当前更新的状态记录到控制台。但是，会记录初始状态而不是当前状态。

这是我想要做的事情的简单表示（这不是我的实际组件）：

import React, { useEffect, useState } from \'react\';\n\nconst Input = () => {\n    const [text, setText] = useState(\'aaa\');\n\n    useEffect(() => {\n        return () => {\n            console.log(text);\n        }\n    }, [])\n\n    const onChange = (e) => {\n        setText(e.target.value);\n    };\n\n    return (\n        <div>\n            <input type="text" value={text} onChange={onChange} />\n        </div>\n    )\n}\n\nexport default Input;\n

我将状态初始化为“初始”。然后我使用输入字段来更改状态，假设我输入“新文本”。但是，当组件卸载时，控制台将记录“初始”而不是“新文本”。

为什么会出现这种情况？如何在卸载时访问当前更新的状态？

非常感谢！

编辑：

将文本添加到 useEffect 依赖项数组并不能解决我的问题，因为在我的现实场景中，我想要做的是根据当前状态触发异步操作，并且它不会 \xe2\x80\x99t每次 \xe2\x80\x9ctext\xe2\x80\x9d 状态更改时都可以有效地执行此操作。

I\xe2\x80\x99m 正在寻找一种仅在组件卸载之前获取当前状态的方法。

我有一些代码，在一个钩子中，来检测浏览器是否在线/离线：

export function useConnectivity() {
  const [isOnline, setNetwork] = useState(window.navigator.onLine);
  const updateNetwork = () => {
    setNetwork(window.navigator.onLine);
  };
  useEffect(() => {
    window.addEventListener('offline', updateNetwork);
    window.addEventListener('online', updateNetwork);
    return () => {
      window.removeEventListener('offline', updateNetwork);
      window.removeEventListener('online', updateNetwork);
    };
  });
  return isOnline;
}

我有这个基本测试：

test('hook should detect offline state', () => {
  let internetState = jest.spyOn(window.navigator, 'onLine', 'get');
  internetState.mockReturnValue(false);

  const { result } = renderHook(() => useConnectivity());
  expect(result.current.valueOf()).toBe(false);
});

但是，我想运行一个测试，看看它在offline触发事件时是否返回正确的值，而不仅仅是在渲染时模拟返回值之后。解决这个问题的最佳方法是什么？到目前为止我得到的是这样的：

test('hook should detect offline state then online state', async () => {
  const …

我的页面中的对象内有数据。我想从该页面重定向到另一个页面以及数据，如下面的代码

const redirectAppointmentStep1 = (value) => {
    router.push({
      pathname: '/Appointment/bookingstep1',
      query: {value : value},
    })
  }

我在bookingstep1这样的页面中收到了该数据

 const {query} = useRouter()

但问题是查询出现在 url 上，并且 url 看起来不干净。如何将数据从一个页面发送到另一个页面，但不将其显示在 url 上？

我是 Next.js 的新手，因此我们将非常感谢任何帮助。

我需要帮助来解决这个错误：

“在既不是 React 函数组件也不是自定义 React Hook 函数的函数中调用 useDispatch”。

解释：

store.js和userSlice.js保存了我的 Redux 相关事物（rtk）的定义。

Auth.js旨在保存身份验证/注销功能并保持 redux“用户”存储更新。现在我只有谷歌身份验证，当我调用redirectToGoogleSSO时，它会被验证。

身份验证部分工作完美，我正在正确检索用户信息，但我很难使其更新用户存储。调度（fetchAuthUser（））是我收到错误的地方。

Sidebar.js是一个导航侧边栏，它将包含一个用于登录/注销和访问 profile.js 的菜单（尚未实现）。如果我将 Auth 中的所有代码放入侧边栏组件中，身份验证工作和 redux 存储都会被填充，但我想将内容保留在 Auth.js 中，这样我就可以在其他组件中使用它，而不仅仅是在侧边栏中。

//store.js:

import { configureStore } from '@reduxjs/toolkit';
import userReducer from './userSlice';

export default configureStore({
    reducer: {
        user: userReducer
    }
});

//userSlice.js

import { createSlice } from '@reduxjs/toolkit';
import axios from "axios";

export const userSlice = createSlice({
  name: 'user',
  initialState: { 
    email: 'teste@123',
    name: 'teste name',
    picture: 'teste pic',
    isAuthenticated: …

不久，当我尝试在我的组件之一中将 useState 与 useContext 一起使用时，所有页面都消失了。UseState 出于某种原因阻止了我的路由器，我不知道为什么......你能告诉我我的错误在哪里吗？

下面的一些代码：Index.js

export default function App() {
  const [value, setValue] = useState(false)       -----> here I set the state
  return (
    <BrowserRouter>
      <UserContext.Provider value={{ value, setValue }}>
        <Routes>
          <Route path='/' element={<Layout />}>
            <Route index element={<Home />} />
            <Route path='Home' element={<Home />} />
            <Route path='Menu' element={<Menu />} />
            <Route path='Story' element={<Story />} />
            <Route path='Coffee' element={<Coffee />} />
            <Route path='Cart' element={<Cart />} />
          </Route>
        </Routes>
      </UserContext.Provider>
    </BrowserRouter>
  )
}

// ReactDOM.render(<App />, document.getElementById("root"))
const root = ReactDOM.createRoot(document.getElementById("root")) …