小编Jul*_*fer的帖子

我的路由器内有一个全局标头组件。但我想隐藏在登录页面上。

我尝试使用这样的 window.location 解决方案。它可以工作，但在登录页面导航到主页后不起作用。（在我刷新页面之前它不会显示标题）

应用程序.js

import React, { useState, useEffect } from "react";
import "./sass/app.scss";
import { db, auth } from "./configs/firebase-config";
import { MainContext } from "./hooks/Context";
import { eventbriteRoutes } from "./configs/routes";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Header from "./components/Home/Header";

function App() {
  const [isAuth, setIsAuth] = useState(localStorage.getItem("isAuth"));

  const data = {
    isAuth,
    setIsAuth,
  };

  return (
    <>
      <MainContext.Provider value={data}>
        <Router>
          {window.location.pathname !== "/login" ? <Header /> : null}{" "}
          <Routes>
            {eventbriteRoutes.map((RouteItem, …

我有一个像这样的获取刷新令牌网址client.com/api//auth/refresh-token。但我很难使用这个。我认为登录后应该在本地存储中保存刷新令牌。但我该如何使用它呢？

登录.tsx

export const useLogin = () => {

    const LoginAuth = async (data: AuthenticationProps) => {
        await axios.post(baseURL + `client/auth/login`,
        {
            email: data.email,
            password: data.password,
        },
        {
            headers: {
                "Content-Type": "application/json",
                Accept: "application/json",
            }
        }
        )
        .then((res) => {
            if(res.status === 200) {
                console.log("success")
            }
        }, (err) => {
            console.log(err);
        })
        
    }
    return {
        LoginAuth,
    }
}

router.query.title当我刷新页面时消失。

据我发现，我必须使用 getServerSideProps，但我不知道在 getServerSideProps 上输入什么。或者有什么办法可以做到吗？

编辑：我尝试了 Yilmaz 的解决方案并删除了 as={} 现在它可以工作了。但是现在查询链接太长而不使用 as={} 有什么解决方案吗？

索引.tsx

const Projects = () => {
  const [projects, setProjects] = useState(data);

  {projects.slice(0, loadMore).map((project) => (
          <Link
            key={project.id}
            href={{
              pathname: "/projects/" + project.title,
              query: {
                id: project.id,
                category: project.category,
                title: project.title,
                image: project.image.src,
                image1: project.image1.src,
                image2: project.image2.src,
                image3: project.image3.src,
                image4: project.image4.src,
                image5: project.image5.src,
              },
            }}
            as={"/projects/" + project.title}
            passHref={true}
          >
}

[id].tsx

import { GetServerSideProps } from "next";

export const getServerSideProps: GetServerSideProps = async (context) => { …