如何讓 jsx "to: "/profile"" 重定向並加載配置文件頁面？

Question

在我的整個應用程序中，我都在使用到達路由器來處理頁面之間的導航。

但是，我找到了一個我喜歡的導航欄組件，並將其帶入了我的應用程序。 我不確定為什么，但是“to:”/profile“”按鈕實際上並沒有導航和加載我的 http://localhost:3000/profile 頁面。

它確實將 html 地址更改為顯示 http://localhost:3000/profile，但它不會重定向和加載配置文件頁面。 我必須刷新瀏覽器才能這樣做。

關於如何讓這個“我的個人資料”按鈕實際重定向和加載個人資料頁面的任何想法？ 我可以在此語法中使用 reach router "navigate(/"profile")" 嗎？ 當我嘗試時它似乎不合適。 謝謝！

導航欄.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

嗯，看到你用過的package：

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

發現你正在使用這個 package 提供的示例代碼。這里的“菜單”用於展示目的，我認為 package 沒有將它用作路由器鏈接或導航鏈接。 將每個菜單對象包裝為 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"
    },
  };