如何让反应 jsx “to：”/profile”” 重定向和加载配置文件页面？

Question

在我的整个应用程序中，我都在使用到达路由器来处理我的页面之间的导航。

但是，我找到了一个我喜欢的导航栏组件，并将其带入了我的应用程序。我不知道为什么，但是“to:”/profile“”按钮实际上并没有导航和加载我的 http://localhost:3000/profile 页面。

它确实将 html 地址更改为显示 http://localhost:3000/profile，但它不会重定向和加载配置文件页面。我必须刷新浏览器才能这样做。

关于如何让这个“我的个人资料”按钮实际重定向和加载个人资料页面的任何想法？我可以在这种语法中使用到达路由器“导航（/”配置文件“）”吗？当我尝试时，它似乎不适合。谢谢！

Navbar.js

import { BorderStyle } from "@material-ui/icons";
import React from "react";
import * as ReactNavbar from "react-responsive-animate-navbar";
import Logo from "../Assets/Media/ToolioLogoSmall.png"
import { navigate, Link } from "@reach/router"; //not using this currently, but it is used for navigation throughout the rest of my app.
 

export default function Navbar() {
  console.log(ReactNavbar.ReactNavbar)
  return (
    <div style={style.background}>
      <ReactNavbar.ReactNavbar style={style.background}
        color="rgb(25, 25, 25)"
        logo={Logo}
        menu={[
          { name: "HOME", to: "/Explore" },
          { name: "ARTICLES", to: "/articles" },
          { name: "My Profile", to: "/profile" },
          { name: "CONTACT", to: "/contact" },
        ]}
        social={[
          {
            name: "Linkedin",
            url: "https://www.linkedin.com/",
            icon: ["fab", "linkedin-in"],
          },
          {
            name: "Facebook",
            url: "https://www.facebook.com/",
            icon: ["fab", "facebook-f"],
          },
          {
            name: "Instagram",
            url: "https://www.instagram.com/",
            icon: ["fab", "instagram"],
          },
          {
            name: "Twitter",
            url: "http://www.twitter.com/",
            icon: ["fab", "twitter"],
          },
        ]}
      />
      </div>
    );
  }

Answer 1

嗯，我看到了你用过的包：

import * as ReactNavbar from "react-responsive-animate-navbar

发现您正在使用此软件包提供的示例代码。 这里的“菜单”用于演示目的，我不认为该软件包已将其用作路由器链接或导航链接。 将每个菜单对象包装为 NavLink，如下所示：

menu={[
          { name: "HOME", to: "/Explore" },
          { name: "ARTICLES", to: "/articles" },
          { name: "My Profile", to: "/profile" },
          { name: "CONTACT", to: "/contact" },
        ]}

试试这个：

menu={[
          { name: "HOME", to: {<Link to="/explore"/>} },
          { name: "ARTICLES", to: {<Link to="/articles"/>} }
    ]}

或者你也可以使用 navlaink。

Answer 2

@蒂娜

感谢您抽出宝贵时间回复！！我实现了你建议的片段，但看起来语法由于某种原因已经关闭。我还安装并导入了 react-router-dom 并使用了。

这是下图中显示的当前代码。关于让您的建议发挥作用的任何想法？我认为这里的最终解决方案将是某种解决方法。

import { BorderStyle } from "@material-ui/icons";
import React from "react";
import * as ReactNavbar from "react-responsive-animate-navbar";
import Logo from "../Assets/Media/ToolioLogoSmall.png"
import { Auth } from "aws-amplify";
import { navigate } from "@reach/router";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
 

export default function Navbar({ setSignedIn }) {
  console.log(ReactNavbar.ReactNavbar)
  return (
    <Router>
    <div style={style.background}>
      <ReactNavbar.ReactNavbar style={style.background}
        color="rgb(25, 25, 25)"
        logo={Logo}
        menu={[
          { name: "Home", to: {<Link to="/explore"/>} },
          { name: "My Profile", to: {<Link to="/articles">} },
          { name: "About Us", to: {<Link to="/AboutUs"/>} },
        ]}
        social={[
          {
            name: "Linkedin",
            url: "https://www.linkedin.com/",
            icon: ["fab", "linkedin-in"],
          },
          {
            name: "Facebook",
            url: "https://www.facebook.com/",
            icon: ["fab", "facebook-f"],
          },
          {
            name: "Instagram",
            url: "https://www.instagram.com/",
            icon: ["fab", "instagram"],
          },
          {
            name: "Twitter",
            url: "http://www.twitter.com/",
            icon: ["fab", "twitter"],
          },
        ]}
      />
            <button
          style={style.signouticon}
          onClick={() => {
            (async function () {
              try {
                await Auth.signOut({ global: true });
                setSignedIn(undefined);
                navigate("/");
              } catch (error) {
                console.log(error);
              }
            })();
          }}
        >
          sign out
        </button>
      </div>
      </Router>
    );
  }

  const style = {
    background: {
      backgroundColor: "black",
      borderStyle: "10px black"
    },
  };