Блог

во всем моем приложении я использую reach router для управления навигацией между моими страницами.

Тем не менее, я нашел компонент navbar, который мне нравится, и перенес его в свое приложение. Я не уверен, почему, но кнопка «to: » / profile»» на самом деле не перемещает и не загружает мой http://localhost:3000/profile страница.

Он изменяет html-адрес, чтобы показать http://localhost:3000/profile , но он не перенаправляет и не загружает страницу профиля. Для этого мне нужно обновить браузер.

Есть идеи о том, как заставить эту кнопку «Мой профиль» фактически перенаправлять и загружать страницу профиля? Могу ли я использовать reach router «navigate (/»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>
    );
  }
  

Ну, я видел пакет, который вы использовали:

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

обнаружено, что вы используете предоставленный пример кода этого пакета.
«меню» здесь используется для целей презентации, я не думаю, что пакет использовал его в качестве ссылки маршрутизатора или navlink.
Оберните каждый из объектов меню как 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

Я ценю, что вы нашли время ответить!! Я реализовал предложенный вами вариант, но, похоже, синтаксис по какой-то причине отключен. Я также установил и импортировал 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"
    },
  };