React CSSTransition 两次创建新页面并在这两个相同的页面上运行转换

Question

我使用react-router和useNavigate在页面之间切换。 通过CSSTransition ，我想在页面之间进行平滑过渡。 不幸的是，它没有按预期工作，路由器立即删除当前页面并创建新页面两次，然后在这两个相同的页面上执行转换。

应用程序.js

import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";
import {
  BrowserRouter,
  Router,
  Route,
  Routes,
  useLocation
} from "react-router-dom";
import { TransitionGroup, CSSTransition } from "react-transition-group";
import { Nav, Navbar, NavDropdown } from "react-bootstrap";
import { useNavigate } from "react-router-dom";

import Settings from "./Settings";
import TestPage from "./TestPage";

function App() {
  const location = useLocation();
  const navigate = useNavigate();

  return (
    <div className="App">
      <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
        <Navbar.Brand href="#home">Blaa</Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="mr-auto">
            <Nav.Link onClick={() => navigate("/settings")}>Settings</Nav.Link>
            <Nav.Link onClick={() => navigate("/testPage")}>TestPage</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>

      <TransitionGroup component={null}>
        <CSSTransition key={location.key} classNames="fade" timeout={3000}>
          <Routes>
            <Route path="/settings" element={<Settings />} />
            <Route path="/testPage" element={<TestPage />} />
          </Routes>
        </CSSTransition>
      </TransitionGroup>
    </div>
  );
}

const Root = () => (
  <BrowserRouter basename={window.location.pathname.replace(/(\/[^/]+)$/, "")}>
    <div className="App">
      <App />
    </div>
    <br />
  </BrowserRouter>
);

export default Root;

这是代码： https://codesandbox.io/s/cool-moon-l99ogc

这种方法有什么问题？ 我找不到解决办法。

Answer 1

将location传递给Routes组件。

function App() {
  const location = useLocation();
  const navigate = useNavigate();

  return (
    <div className="App">
      <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
        <Navbar.Brand href="#home">Blaa</Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="mr-auto">
            <Nav.Link onClick={() => navigate("/settings")}>Settings</Nav.Link>
            <Nav.Link onClick={() => navigate("/testPage")}>TestPage</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>

      <TransitionGroup component={null}>
        <CSSTransition key={location.key} classNames="fade" timeout={3000}>
          <Routes
            location={location} // <-- Pass location prop
          >
            <Route path="/settings" element={<Settings />} />
            <Route path="/testPage" element={<TestPage />} />
          </Routes>
        </CSSTransition>
      </TransitionGroup>
    </div>
  );
}