Javascript Router.push重定向但不呈现页面

嗨，我正在尝试在下一个js中实现简单路由。这是我的密码

import React, { useEffect, useState } from "react";
import Router from "next/router";

import NavBar from "../components/NavBar";


function Index() {

  return (
    <div>
      <h1>Hi Guys!! Welcome!!!</h1>
      <h3>Select your role:</h3>
      <div onClick={() => Router.replace("/admin")}>
        Admin
      </div>
    </div>
  );
}

export default Index;

import React，{useffect，useState}来自“React”；
从“下一个/路由器”导入路由器；
从“./components/NavBar”导入导航栏；
函数索引（）{
返回(
大家好！！欢迎！！！
选择您的角色：
路由器。替换（“/admin”）}>
管理
);
}
出口违约指数；

现在，当我单击管理页面时，它会将其重定向到管理页面，但不会呈现组件。我必须在组件上按enter键才能渲染它

这是我的管理组件：

import React from 'react';

function Admin(){


    return <h1>Welcome to admin Dashboard</h1>
}

export default Admin;

从“React”导入React；
函数Admin（）{
返回“欢迎使用管理仪表板”
}
导出默认管理员；

不确定，但您可以尝试改用

useRouter

import { useRouter } from 'next/router';

const router = useRouter();
onClick={() => router.push("/admin");

试一试

---

错误重试

Router.replace（href，as）

href-页面目录内的路径。这是唯一必需的道具，即将在浏览器URL栏中呈现的路径。用于动态路线

Router.replace("path to js file", "/admin")