Javascript 如何获得react jsx“；致：“/简介&引用；要重定向并加载配置文件页面？

在我的整个应用程序中，我使用reach路由器处理页面之间的导航

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

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

关于如何让这个“我的个人资料”按钮实际重定向和加载个人资料页面，有什么想法吗？我可以在这个语法中使用reach路由器“导航（/“配置文件”）？我试的时候好像不合身。谢谢

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>
    );
  }

从“@material ui/icons”导入{BorderStyle}；
从“React”导入React；
从“react responsive animate navbar”导入*作为react navbar；
从“./Assets/Media/tooliologsall.png”导入徽标
从“@reach/router”导入{导航，链接}”//目前未使用此功能，但它用于在我的应用程序的其余部分进行导航。
导出默认函数Navbar（）{
console.log（ReactNavbar.ReactNavbar）
返回(
);
}

我看到了您使用的软件包：

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。

@Tina

我感谢你花时间回复！！我实现了您建议的snipped，但由于某种原因，语法似乎不正确。我还安装并导入了react路由器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"
    },
  };

从“@material ui/icons”导入{BorderStyle}；
从“React”导入React；
从“react responsive animate navbar”导入*作为react navbar；
从“./Assets/Media/tooliologsall.png”导入徽标
从“aws放大”导入{Auth}；
从“@reach/router”导入{navigate}；
进口{
BrowserRouter作为路由器，
转换
路线,，
链接
}从“反应路由器dom”；
导出默认函数Navbar（{setSignedIn}）{
console.log（ReactNavbar.ReactNavbar）
返回(
{
（异步函数（）{
试一试{
等待身份验证注销（{global:true}）；
setSignedIn（未定义）；
导航（“/”）；
}捕获（错误）{
console.log（错误）；
}
})();
}}
>
退出
);
}
常量样式={
背景：{
背景颜色：“黑色”，
边框样式：“10px黑色”
},
};

---

嗨@Tina，感谢您的回复！我在下面添加了我的回答，因为它包括代码和屏幕截图。