标签: react-router-dom

我尝试在登录我的 React 应用程序后重定向用户，但导航不起作用，我不知道为什么......

这是我的代码，感谢您的帮助

import React, { Component } from "react";
import {Route, Navigate} from 'react-router-dom';
import Bouton from "../components/Bouton";

class Dallan extends Component{
    logout = () =>{
        localStorage.removeItem('logged');
        return <Navigate to= '/login' />;
    }
    render(){
        return(
            <Bouton typeBtn = 'btn-danger' click={() => this.logout()}>Deconnexion</Bouton>
        )
    }
}

export default Dallan;

在我的 App.js 中

function App() {
  let session = localStorage.getItem('logged');
  return (
    <BrowserRouter>
    <Routes>
    <Route path="/" element={session ? <Navigate to="/dallan" /> : <Login/>} />
       <Route path='/dallan' element={<Dallan/>}/>
    </Routes>
    </BrowserRouter>
 
  ); …

我在/customerOrders/13页面中，从那里我尝试重定向到/customerOrders/14使用navigate('/customerOrders/14'). 即使 URL 已更新，页面也不会重定向到/customerOrders/14.

以下是我从代码库中提取的与此相关的代码片段。

应用程序.js

import {
  BrowserRouter,
  Routes,
  Route
} from "react-router-dom";
...
<BrowserRouter>
    <Routes>
        <Route path="customerOrders/:id" element={<CustomerOrderForm />}></Route>
    </Routes>
<Router>

客户订单表格.jsx

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

const CustomerOrderForm = () => {
    let navigate = useNavigate();

    const save = async () => {
        //
        // logic to persist data goes here...
        //

        navigate(`/customerOrders/${customerOrderId}`);
    }
    ...
}

使用此代码：

import { Link, useHistory } from "react-router-dom";

...

const history = useHistory();

...

history.push("/login");

显示此错误：

useHistory 过时了吗？或者我确实需要使用另一个功能？

SO 上有一些类似的问题，但它们已经过时且陈旧，解决方案不再有效

如何更改页面标题，以免“历史记录”菜单中出现相同的名称？

我在我尝试过的文档中找不到任何内容：

<Link to="/home" title="Home"/>

但它不起作用，我正在查看代码：

<Link to="/home" title="Home"/>

没有标题，只有状态对象。

该状态在 v5 的迁移指南中可见，但没有说明它的用途。我猜这是一个历史状态对象，但它与标题 AFAIK 无关。

有什么办法可以改变历史的标题吗？对于修改历史标题的路由库来说，这似乎是很常见的行为。

所以一开始这可能很难理解，但我会尽力解释一切可能的事情。我正在渲染一个使用库useNavigation中的钩子的应用程序组件react-router-dom。在内部AppRoutes，我检查是否有$stateParams.redirect其他值，例如param1和。我从应用程序中定义的另一个自定义挂钩param2获取。$stateParams运行应用程序时，我收到日志，should navigate now但它实际上没有导航到decider-route页面，而是停留在组件/所在的位置<Home />。另外，我在控制台中收到此警告，You should call navigate() in a React.useEffect(), not when your component is first rendered.我想知道为什么不进行导航，decider-route并且警告是不进行导航的原因？

    const App = () => {
        return (
        <MemoryRouter>
          <AppRoutes />
        </MemoryRouter>
      )
    }
    
    const AppRoutes = () => {
      const navigate = useNavigate()                // react-router-dom v6
    
      if ($stateParams.redirect) {
        if ($stateParams.param1 && $stateParams.param2) {
          console.log('StateParams : …

我设置了以下两条路径

<Route path="bookings/:bookingnumber" element={<Bookings />} />
<Route path="bookings" element={<Bookings />} />

在Bookings组件中，我编写了条件代码来检查参数是否:bookingnumber已传递，然后它仅显示与该预订号码相关的结果。否则，如果不传递任何参数，则显示所有预订的所有结果。

我用来Outlet在主区域中显示这些组件，并且可以从侧边栏中选择这两个路径。

假设我有10 results，如果我去/bookings，2 results如果我去/bookings/123。

但是，如果我先转到/bookings/123然后再转到，/bookings它只会继续显示2 results（该组件不会重新加载，但我可以看到浏览器中的 URL 发生变化）

我已将 React 版本升级到 18，并从 BrowserRouter 组件中收到一些类型错误，尝试了不同的方法，但无法识别问题所在。

下面是我调试代码时的错误，

     Overload 1 of 2, '(props: BrowserRouterProps | Readonly<BrowserRouterProps>): BrowserRouter', gave the following error.
    Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<BrowserRouter> & Readonly<BrowserRouterProps>'.
  Overload 2 of 2, '(props: BrowserRouterProps, context: any): BrowserRouter', gave the following error.
    Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes & IntrinsicClassAttributes<BrowserRouter> & Readonly<BrowserRouterProps>'.

如果能伸出援助之手，我将不胜感激。