小编Dre*_*ese的帖子

我有一个测试用例，需要从注册页面 ( /signup) 开始，成功注册后，应用程序应导航到主页 ( /)。我目前正在使用 MemoryRouter 设置初始路由/signup，一切正常。见下文：

import React from 'react';
import userEvent from '@testing-library/user-event';
import { MemoryRouter } from 'react-router';
import { Route, Routes } from 'react-router-dom';
import { render, screen } from '../../test/test-utils';
import { SignUpPage } from './SignUpPage';

const MockHomePage = () => <div>MockHomePage</div>;

describe('<SignUp />', () => {
  test('navigates to Home page on successful signup', async () => {
    render(
      <MemoryRouter initialEntries={['/signup']}>
        <Routes>
          <Route path="/" element={<MockHomePage />} />
          <Route path="/signup" element={<SignUpPage …

在 redux 教程中，我们学习了如何执行乐观更新：

第 8 部分-rtk-query-advanced#implementing-optimistic-updates

但在updateQueryData的 API 参考中，我发现args必须传入 an ：

const updateQueryData = (
  endpointName: string,
  args: any,
  updateRecipe: (draft: Draft<CachedState>) => void
) => ThunkAction<PatchCollection, PartialState, any, AnyAction>;

所以，如果我们的帖子有分页，

getPosts: builder.query({
  query: (current: number) => `/posts?current=${current}`,
  providesTags: ['Post']
}),

这个时候我们如何进行乐观更新呢？

// Is there a way to update all getPosts caches?
// Am I missing some documents?
apiSlice.util.updateQueryData('getPosts', ???, (draft) => {
  const post = draft.find((post) => post.id === postId)
  if (post) {
    post.reactions[reaction]++
  }
})

正如标题所述，我曾经有一个带有状态组件的页面，该组件根据 url 的更改获取不同的 props。

现在，升级到React Router v6，我真的不明白如何让它再次工作。我确实知道现在解决这个问题的唯一方法是使用诸如 useNavigate 之类的钩子，但我不知道如何在我的代码中实现这一点。我已阅读react-router v6文档，但仍然不明白如何解决我的问题。

请参见以下代码。代码从子组件开始排序，直到index.tsx。组件非常广泛，基本上是一个从 props 获取状态的 statful 组件。并根据给定的道具，它会相应地显示其内容。

请问有人可以为我的设置提出解决方案吗？

计算器页.tsx

import Calculator from "../components/Calculator";
import { Route, Routes } from "react-router";
import { Link } from "react-router-dom";

import { FlowrateCalc } from "../calc/calculators/FlowrateCalc";
import { ValveKvsCalc } from "../calc/calculators/ValveKvsCalc";
import { AccelerationCalc } from "../calc/calculators/AccelerationCalc";

export default function CalculatorPage() {
  return (
    <div>
      {/* when changing links, there is no props being sent to Calculator. Calculator is a STATEFUL component*/}
      <Routes>
        <Route
          path={"flow"} …

这是代码截图。

我想渲染Homepage组件，但我想将其包装到这些MainLayout组件中。

问题是屏幕是空白的，终端中没有错误，但是当我检查页面时，它显示“位置“/”处的匹配叶路由没有元素”，所以我知道这是版本更新语法问题，因为我我在写作时遇到了同样的问题，component= {component }但语法已经改变，我应该写element={<component />}。

所以我相信这也是语法问题，但我已经做过研究但无法解决。我相信我应该改变这一点

/* ... */ render = {() => (
  <MainLayout>
    <Homepage />
  </MainLayout>
)}

有点新的语法，但不知道如何。

我有以下链接：

<NavLink to={x.url} className={(x) = x.isActive ? 'active' : 'not-active' } >
    <img src={`icon-default.svg`} /> // change from default.svg to active.svg       
    Link Text
</NavLink>

img我的图标位于 HTML 而不是 CSS 中，我想根据 isActive 调用不同的 img，是否可以在子元素（标签）上执行此操作？

react-router-dom": "^6.0.2"

谢谢

以下React路由代码可能在React Router v5中工作，但在React Router v6中给出以下错误

错误：[Player] 不是组件<Route>。的所有子组件<Routes>必须是<Route>或<React.Fragment>

是否可以更新路由/路由代码，以便它在 React Router v6 中工作？

function App() {
  // Some stuff here...

  const { players, offlinePlayers } = usePlayers();


  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
        <BrowserRouter>

            <Routes>
                <Route path="/" element={<Home />} />

                <Route path="/players">
                {players.map((player) => {
                    return (
                    <Route exact key={player.name} path={`/players/${player.name}`}>
                        <Player player={player} />
                    </Route>
                    );
                })}
                </Route>
            </Routes>  

        </BrowserRouter>
    </ThemeProvider>
  )

}

我使用的是react-router-domv6，我看过其他人的问题，但对我没有帮助；我想要的只是让回到任何一点变得不可能。

const App = () => {
  const user = useSelector((state) => state.user.userData);
  /* Destructuring the state of auth from the redux store. */
  const { isLogged, isVerified, resetPasswordSent, resetPasswordVerified } =
    useSelector((state) => state.auth);

  const Check = () => {
    if (user?.firstTimeAccess === true) {
      return <SetProfile />;
    } else if (user?.firstTimeAccess === false) {
      return <Navigate to="/home" />;
    }
  };

  return (
    <Router>
      <Routes>
        <Route path="/" element={isLogged ? <Check /> : <Landing />} />
        <Route
          path="/login" …

我基本上试图将喜欢/不喜欢的状态保存在我尝试使用 axios 从 API 获取的产品列表中，但出现以下错误。

在状态中检测到不可序列化的值，路径为：“products”。值：{"_x":0"_y",_z":null,"_A":null}

为了保存状态，我尝试使用 Redux Toolkit。下面我有productSlice组件和ProductListScreen组件的代码。

产品切片.js

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

const productsSlice = createSlice({
  name: "products",
  initialState: { items: [], likes: [] },
  reducers: {
    fetchProducts: async (state) => {
      const response = await axios.get("https://dummyjson.com/products");
      state.items = response.data;
      state.likes = new Array(state.items.length).fill(false);
    },
    toggleLike: (state, action) => {
      state.likes[action.payload.index] = action.payload.isLiked;
    },
  },
});

export const { fetchProducts, toggleLike } = productsSlice.actions;

export default productsSlice.reducer;

产品列表屏幕.js …

任何大型应用程序都会有可能需要路由器重定向用户的一般上下文。由于RouterProvider只能在根级别使用。如何将它与应用程序上下文一起使用。

例如，ApiContext如果用户无权访问 API，我会重定向到 403 路由/组件。

如何将此上下文包装在 中，而RouterProvider不必在每次路由更改时重新渲染它。换句话说。我怎样才能拥有使用路由器的父上下文？

如果我使用 ，它工作得很好BrowserRouter，但在 v6.8 中卸载之前使用任何类型的提示的唯一方法是使用数据 api 和方法createBrowserRouter。

标题导航也是如此。我不希望我的标头出现在每个路由组件和路由的一部分中。我希望我的标头是静态的，而路由组件是动态的。

// Aplication Context
export const ApiContext = React.createContext({});

export const ApiProvider = memo((p: { children: React.ReactNode; }) => {
  const navigate = useNavigate();
  const [token, setToken] = useState<string>()

  if (!token) {
    navigate('/403');
  }

  const value = useMemo(() => ({}), []);
  return (
    <ApiContext.Provider value={value}>
      {p.children}
    </ApiContext.Provider>
  );
});

// Index
const router = createBrowserRouter([
  {
    path: …

我有一个react + django + webpack的项目。我在我的上定义了路线App.js

<NavBar />
<Router>
  <Routes>
    <Route exact path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</Router>

Links我在我的组件中定义NavBar.js：

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

export default function NavBar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

如果我Link在其中使用App.js它可以正常工作，但是当我在组件中使用它时NavBar.js我会收到此错误：

网络包配置：

<NavBar />
<Router>
  <Routes>
    <Route exact path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</Router>

我Switch也尝试使用，但它只能使用超链接 …