如何使用路由重定向页面？答案

【问题标题】：How to redirect page using Route?如何使用路由重定向页面？
【发布时间】：2021-12-30 03:59:27
【问题描述】：

我有点想做一个功能，当我点击导航栏中的每个项目甚至每个项目中的子菜单时，它会将我重定向到包含相关信息的新页面，我想使用 Route 在我的链接标签中，但我有点坚持如何做到这一点。我应该使用 Route 或其他代码来完成此任务吗？我想听听你们的建议，顺便说一句，谢谢！

Navbar.js：

import React, { useState } from "react";
import { navItems } from "./NavItems";
import { Link, BrowserRouter as Router } from "react-router-dom";
import "./Navbar.css";
import DropDown from "./DropDown";

function Navbar() {
  const [dropDown, setDropdown] = useState(false);
  return (
    <div>
      <ul className="nav-items">
        {navItems.map((item) => {
          if (item.title === "Services") {
            return (
              <li
                onClick={() => setDropdown(!dropDown)}
                key={item.id}
                className={item.cName}
                onMouseEnter={() => setDropdown(true)}
                onMouseLeave={() => setDropdown(false)}
              >
                <Router>
                  <Link to={item.path}>{item.title}</Link>
                </Router>
                {dropDown && <DropDown />}
              </li>
            );
          }
          return (
            <Router>
              <li key={item.id} className={item.cName}>
                <Link to={item.path}>{item.title}</Link>
              </li>
            </Router>
          );
        })}
      </ul>
    </div>
  );
}
export default Navbar;

DropDown.js：

import React from "react";
import { serviceDropdown } from "./NavItems";
import { Link, BrowserRouter as Router } from "react-router-dom";
import "./DropDown.css";

function DropDown() {
  return (
    <div>
      <ul className="subnav-items">
        {serviceDropdown.map((item) => {
          return (
            <Router>
              <li key={item.id} className={item.cName}>
                <Link to={item.path}>{item.title}</Link>
              </li>
            </Router>
          );
        })}
      </ul>
    </div>
  );
}
export default DropDown;

沙盒链接：https://codesandbox.io/s/dropdown-menu-ho4h8?file=/src/components/DropDown.js:0-560

【问题讨论】：

你渲染了太多的路由，你只需要一个靠近你的应用的根目录来为所有的链接和路由提供一个路由上下文。我不太明白你的问题。您的代码框中的链接似乎都更新了 URL，但您根本没有呈现任何路由。这是问题/问题，在哪里呈现路线？

标签： react-router

【解决方案1】：

一种可能的解决方案是使用 react-router 中的 useHistory 钩子并使用 push 方法移动到不同的页面。代码如下所示

const history = useHistory();

// Use the onClick props of your dropdown element

onClick={() => history.push("other URL");}

【讨论】：