标签: react-router-dom

我正在将react-router-dom从v5升级到v6，代码库我还不完全熟悉，我很好奇如何替换以下代码：

const history = useHistory();
history.replace(url, params);

在文档中，它们仅显示在存在 1 个参数的情况下您将执行的替换操作。所以如果我有：

history.replace(url) 

我会简单地做：

const navigate = useNavigate();
navigate(url, {replace: true})

如何确保第二个参数与 useNavigate 挂钩一起保留？

我很想这样做：

const navigate = useNavigate();
navigate(url, params)

或者

const navigate = useNavigate();
navigate(url, { state: params })

怎样更换才不会造成影响呢？

“链接”无法正常工作。请任何人解决这个问题。我尝试了很多方法但没有一个有效。当我点击主页或关于时，它不会移动到另一侧，我必须手动重新加载这一侧。

header.js

import { Link } from "react-router-dom";
<Link className="nav-link active" aria-current="page" to="/">Home</Link>
<Link className="nav-link" to="/about">About</Link>

应用程序.js

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
<Router>
    <Header title="My Todos List" />
    <Switch>
      <Route
        exact
        path="/"
        render={() => {
          return (
            <>
              <AddTodo addTodo={addTodo} />
              <Todos todos={todos} onDelete={onDelete} />
            </>
          );
        }}
      ></Route>
      <Route exact path="/about">
        <About />
      </Route>
    </Switch>
    <Footer />
  </Router>

包.json

{

“名称”：“todos-list”，“版本”：“0.1.0”，“私有”：true，“依赖项”：{“@testing-library/jest-dom”：“^ 5.16.4”，“ @testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^5.3.0", "react-scripts": "5.0.1", …

我们希望向我们的 React 应用程序添加自定义日志记录，并希望在每次用户更改路由时进行记录。为了解决这个问题，我们正在创建一个包装组件，这就是我们目前拥有的：

import React, { useEffect } from 'react';\nimport { Route } from 'react-router-dom';\n\nfunction LoggerRoute(isExact, path, element) {\n    useEffect(() => {\n        // send route-change log event to our mongodb collection\n    }, []);\n\n    // And return Route\n    return (\n        isExact\n            ? <Route exact path={path} element={element} />\n            : <Route exact path={path} element={element} />\n    );\n}\n\nexport default LoggerRoute;\n

...在我们的 App.js 文件中，我们更改了路由：

// remove this // <Route exact path='/tools/team-scatter' element={<TeamScatterApp />} />\n<LoggerRoute isExact={true} path='/tools/team-scatter' element={<TeamScatterApp />} />\n

但是，这会引发错误Uncaught Error: …

我是 React 新手，所以我确信我不理解 useLocation 的用例 - 比如它有什么用处和它不适合什么。

我想要一种方法，使特定组件可以知道任何位置更改，包括来自 PushState 的位置更改。注意：我正在转换 Anuglar JS 1.0 代码库，该代码库仅使用哈希中的所有查询信息。我想在此重写中使用 PushState 浏览器功能。

下面的示例代码（我只是将其作为新的 React 应用程序组件中的单个组件：

import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

const RandLocation: React.FC = () => {
    const location = useLocation();

    useEffect(() => {
        console.log('location: ', location);
    }, [location]);
    
    return (
        <div>
            <button 
            onClick={() => {const r =  Math.random(); window.history.pushState({'rnd': r }, '', '/?rnd=' + r)}}>
                Click Me</button>
            <br/>
        </div>
    )
}
export default RandLocation;

我只看到 useEffect 在加载时运行，以及使用浏览器按钮前进或后退。但当我点击“Click …

我正在尝试使用createBrowserRouterReact Router v6 中的函数延迟加载路由元素，但我不断收到此错误：`位置“/admin/reports/enrollees”处的匹配叶路由没有元素或组件。这意味着默认情况下它将呈现空值，从而导致“空”页面。这是我的路线文件：

export default createBrowserRouter([
    {
        path: '/admin/reports',
        children: [
            {
                path: '',
                element: <Index />,
            },
            {
                path: 'enrollees',
                lazy: () => import('../../components/Reports/Enrollees'),
            },
            {
                path: 'facilities',
                lazy: () => import('../../components/Reports/Facilities'),
            }
        ],
    }
])

我一开始尝试这样做：

export default createBrowserRouter([
    {
        path: '/admin/reports',
        children: [
            {
                path: '',
                element: <Index />,
            },
            {
                path: 'enrollees',
                element: lazy(() => import('../../components/Reports/Enrollees')),
            },
            {
                path: 'facilities',
                element: lazy(() => import('../../components/Reports/Facilities')),
            }
        ],
    }
])

但我得到了错误：Functions are not valid …

我正在采用react-router-dom一个生产应用程序，我想知道将内部路由的所有链接（例如在我们的导航栏上等）从本机标记切换a到. 我尝试测量此更改的性能，但凭经验发现没有差异。我是否误解了 how不同于？有强有力的理由去改变吗？如果是的话，它们是什么？我应该关注哪些指标？Linkreact-router-domLinka

我有一个问题,我无法导航到路径大于1节的路由,如此使用react-router-dom@4.2.2:此外,这是我有这个问题的回购的Github链接.

https://github.com/ShawnCholeva/React-Typescript-Webpack4-Router

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
//All routes work if I use HashRouter here instead of BrowserRouter

class App extends Component {
    render() {
        return (
            <Router>
                <Switch>
                    <Route exact path='/' component={ Login }/> <--- Works
                    <Route exact path='/accountSetup/:guid?' component={ AccountSetup }/> 
                    ^-- Above works when just '/accountSetup' but fails when I do '/accountSetup/123'
                    <Route component={ NotFound } /> <--- Works
                </Switch>
            </Router>
        );
    } …

导航工作,家庭链接总是活跃其他链接都可以.添加为组件,没有道具.

HTML

 <Menu/>

CSS

.active{
background-color:#ff6a00;
}

JS

import React, { Component } from 'react';
import './menu.css';
import { NavLink } from 'react-router-dom'
export default class TopMenu extends Component {

 render() {
    return (
        <div className="ui container">
            <div className="ui stackable menu">
                <div className="item">
                    <NavLink to='/' >
                        <i aria-hidden="true" className="home  icon" ></i>
                        Home
                     </NavLink>
                </div>
                <div className="item">
                    <NavLink to='/about' >
                        <i aria-hidden="true" className="circle info  icon" > 
                        </i>
                        About
                    </NavLink>
                </div>

                <div className="item" >
                    <NavLink to='/Settings'>
                        <i aria-hidden="true" className="cogs icon red" ></i> …

在基于类的react组件中，您可以轻松完成；

componentWillUnmount() {
  window.removeEventListener('resize', this.resizeHandler);
}

虽然我不确定如何在带有React Hooks的基于函数的组件中执行此操作？

在我的应用程序中，我在Component上单击按钮后执行以下功能LoginCard。

const handleLogin = (email, password) => {
  loginService.login(email, password)
    .then((response) => {
      if (!response.error) {
        props.history.push("/");
      }
    });
}

我包的出口LoginCard的withRouter函数从react-router-dom重定向到的路由地址。

export default withRouter(LoginCard);

在LoginCard组件内部，我有一个Tabs组件，该组件在useEffect挂钩中具有事件侦听器。

useEffect(() => {
      setUnderLineStyle(getUnderlineStyle());
      window.addEventListener("resize", _.throttle(() => { 
         setUnderLineStyle(getUnderlineStyle())}, 
         300), 
         {passive:true});
   }, [props]);

但是，当我单击该按钮LoginCard并重定向到/该窗口，然后调整窗口大小时，将调用resize事件列表器中的函数setUnderLineStyle(getUnderlineStyle())。

我曾尝试在其中添加以下内容，useEffect但setUnderLineStyle(getUnderlineStyle())仍会在调整大小时被调用。

return () => window.removeEventListener("resize", _.throttle(() => { 
                setUnderLineStyle(getUnderlineStyle())}, …

我正在使用几个星期前发布的React Router的新useHistory挂钩。我的React-router版本是5.1.2。我的React版本为16.10.1。您可以在底部找到我的代码。

但是，当我从react-router导入新的useHistory时，出现此错误：

Uncaught TypeError: Cannot read property 'history' of undefined

这是由React-router中的这一行引起的

function useHistory() {
  if (process.env.NODE_ENV !== "production") {
    !(typeof useContext === "function") ? process.env.NODE_ENV !== "production" ? invariant(false, "You must use React >= 16.8 in order to use useHistory()") : invariant(false) : void 0;
  }

  return useContext(context).history; <---------------- ERROR IS ON THIS LINE !!!!!!!!!!!!!!!!!
}

由于它与useContext有关，并且可能与上下文冲突有问题，因此我尝试完全删除对useContext的所有调用，创建提供程序等。但是，此操作无济于事。试过React v16.8; 一样。我不知道是什么原因造成的，因为React路由器的所有其他功能都可以正常工作。

***请注意，调用其他React路由器挂钩（例如useLocation或useParams）时，也会发生相同的情况。

有人遇到过这种情况么？有什么想法可能导致这种情况吗？任何帮助将不胜感激，因为我在网上没有找到与此问题相关的信息。

import React, {useEffect, useContext} from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import { …