代码之家 › 专栏 › 技术社区 › Raphael Rafatpanah

React Router v5-点击<Link/>不会重新渲染

react-router reactjs

Raphael Rafatpanah · 技术社区 · 4 年前

据我所知,点击React Router <Link /> 组件应该导致内部的一切 <Router /> 重新渲染。

然而,在这个使用React Router DOM v5.2的简单示例应用程序中,情况似乎并非如此:

import React from "react";
import "./styles.css";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const Foo = () => {
  console.log("rendered");
  return null;
};

export default function App() {
  return (
    <Router>
      <Foo />
      <div className="App">
        <Link to="/">Home</Link>
        <br />
        <Link to="/foo">Foo</Link>

        <Route path="/" exact>
          <p>Home</p>
        </Route>
        <Route path="/foo">
          <p>Foo</p>
        </Route>
      </div>
    </Router>
  );
}

https://codesandbox.io/s/vigorous-water-2fuxt?file=/src/App.js

我错过了什么?

0 回复 | 直到 4 年前

Drew Reese 4 年前

如果你 事实上 提供 Foo 在有路径的路线上,当路径匹配时,它会重新感知。没有路径的路线将总是匹配并渲染,因此它在挂载时渲染,不会重新渲染,因为它没有道具也没有任何状态需要更新( 如果组件包含 Router 重新装载/更新 ).

每次渲染一次 路由器

<Route>
  <Foo />
</Route>

每条路径匹配重新渲染一次

<Route path="/foo">
  <Foo />
</Route>

考虑一下这个演示

const Foo = () => {
  console.log("rendered Foo");
  return null;
};
const Bar = () => {
  console.log("rendered Bar");
  return null;
};

export default function App() {
  const [c, setC] = useState(0);

  return (
    <Router>
      <Route>
        <Foo />
      </Route>

      <button onClick={() => setC(c => c + 1)}>Rerender Router</button>

      <div className="App">
        <Link to="/">Home</Link>
        <br />
        <Link to="/bar">Bar</Link>

        <Route path="/" exact>
          <p>Home</p>
        </Route>
        <Route path="/bar">
          <Bar />
        </Route>
      </div>
    </Router>
  );
}

Gianfranco Fertino 4 年前

据我所知,点击React Router <Link /> 组件应该导致内部的一切 <Router /> 重新渲染。

不 <路由器/> 但是 <Route /> 仅当指定的路径与当前路径匹配时。

孩子们 <路由器/> 将只渲染一次。

推荐文章

siddhant kumar · Can'读取未定义的属性(读取“path”)

2 年前

sdfsdf · useNavigate替换选项的作用是什么?

2 年前

Tanner Summers · react router 6渲染的子级问题

2 年前

Tesh Aych · react axios URL连接返回404未找到

2 年前

wahida cse · 如何在mongodb中只删除一个对象,而不是删除所有与筛选查询匹配的对象?

2 年前

Kevin Tanuwijaya · 如何使用参数来响应路由器dom链接

2 年前

Roy · 带有不同道具的react组件的多个实例无法正常工作

3 年前

Ahmed Haque · 通过出口上下文传递多个状态变量

3 年前

kiryl · 警告。/。缓存/根目录。js尝试导入错误:“BaseContext”未从“@gatsbyjs/reach router”导出(作为“BaseContext”导入)

3 年前

Ancross · 链接未路由到组件

3 年前