小编Dre*_*ese的帖子

我第一次尝试使用路由并遵循Udemy的确切说明：

文件App.js：

import { Route } from "react-router-dom";
import Welcome from "./Pages/Welcome";
import Game from "./Pages/Game";
import Leaderboard from "./Pages/Leaderboard";

function App() {
    return (
        <div>
            <Route path = "/welcome">
                <Welcome />
            </Route>
            <Route path = "/game">
                <Game />
            </Route>
            <Route path = "/leaderboard">
                <Leaderboard />
            </Route>
        </div>
    );
}

export default App;

文件index.js

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

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

我正在关注warning我first load的应用程序。

lockdown-install.js:1 Removing intrinsics.%ArrayPrototype%.toReversed
intrinsics.%ArrayPrototype%.@@unscopables.toSpliced
intrinsics.%ArrayPrototype%.@@unscopables.toSorted

我真的不知道这是怎么回事，所以我之前没有尝试过任何东西。

我进入尝试node_modules找到与之相关的东西......一直在互联网上甚至在 chatGPT 上搜索，但我发现的信息很模糊。

这是我的主要部分类，其中保留了链接的所有路由

export default class Section extends React.Component {
    render() {
        return (
            <div style={{backgroundColor:"white"}}>
                   <Routes>
                   <Route path="/"  element={<Home/>} />
                    <Route path="/discover" element={<Discover/>}   />
                    <Route path="/shop/makeup" element={<Makeup/>}  />
                    <Route path="/home/:id" element={<DetailsPage/>}  />
                    </Routes>
            </div>
        )}}

这是我的卡片页面，它正在从上下文中获取数据。

import React from 'react';
import {DataContext} from './CardData.js';
import {Link} from 'react-router-dom'
import '../App.css';
export default class HomeCard extends React.Component {
    static contextType = DataContext;
    render(){
        const {products} = this.context;
  return (
    <div>
      <div className="card">
                { products.map((val,index)=>{
                   return(
                    <div className="card" key={val.id}>
                    <Card style={{ width: '14rem' …

在 v5 中，我们可以?为可选参数添加尾随路由，但与 v6 一样，对相同内容的支持已被删除，那么编写以下代码的替代方法是什么？

<Route path="/cart/:id?" component={<CartPage />} />

我正在使用反应路由器 v6。我想导航到具有 searchParams 的 URL，但我没有找到开箱即用的方法。useNavigate允许我通过传入字符串来导航到 URL。useSearchParams允许我在当前页面上设置 searchParams。

我可以使用生成 searchParams createSearchParams，然后将其转换为字符串，并将其附加到 URL 的末尾，?中间有一个，但这看起来像是一个 hack。

我希望能够做类似的事情：

const navigate = useNavigate();

// listing?foo=bar
navigate("listing", {
    params: {
        foo: "bar"
    }
});

我的黑客解决方法：

function useNavigateParams() {
    const navigate = useNavigate();

    return (url: string, params: Record<string, string | string[]>) => {
        const searchParams = createSearchParams(params).toString();
        navigate(url + "?" + searchParams);
    };
}

const navigateParams = useNavigateParams();

navigateParams("listing", {
    foo: "bar"
});

我错过了文档中的某些内容吗？

我以前的网站仅在单击主页选项卡时显示主页，然后如果您单击我的导航栏品牌，它会显示 404。该网站在带有 npm start 的 create-react-app 上运行，但在这里不起作用，也不起作用在构建上。我不知道该应用程序出了什么问题，也许路由器设置搞砸了，我不知道。我已链接了我进行路由器设置的应用程序和索引页面。如果您需要更多信息，请向我询问更多信息。

谢谢

指数

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

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

应用程序

import { Routes, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
import About from "./routes/About";
import Contact from "./routes/Contact";
import Home from "./routes/Home";
import Project from "./routes/Project";

const App = () => {
  return (
    <>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home …

import axios from "axios";
import { useNavigate } from "react-router-dom";

export const api = axios.create({
  baseURL: "http://127.0.0.1:8000/",
  headers: {
    "content-type": "application/json",
  },
});

api.interceptors.response.use(
  function (response) {
    return response;
  },
  function (er) {
    if (axios.isAxiosError(er)) {
      if (er.response) {
        if (er.response.status == 401) {

          // Won't work
          useNavigate()("/login");

        }
      }
    }

    return Promise.reject(er);
  }
);

在 v4 中，您将执行 History.push('/whatever', { data }) 然后绑定到该路由的组件可以通过引用 History.location.state 来读取数据对象

现在使用 v6 更改为导航（'whatever'）

你如何像以前一样传递数据？

项目使用redux工具包和rtk查询。数据是从一个 api 获取的，但代码被分成更小的块以反映逻辑部分，例如

• /汽车
• /用户
• /设置

...ETC

注销后，rtk 查询会保留其状态，因此下次登录时数据是旧的。它们甚至可能不反映当前用户。如何使所有缓存失效？

文档说：

要么传递一个带有可选第二个参数To的值（与 相同类型<Link to>），{ replace, state }要么

没有说它是做什么的。那么它会替换整个历史堆栈还是仅替换当前路线？我不知道。