Router.push redirecting but not rendering the page

Question

Hi I am trying to implement simple route in next js. Here is my code

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;

Now when i click the admin page, it redirects it to admin page but does not renders the component. i have to press enter on the component to render it

here is my admin component:

import React from 'react';

function Admin(){


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

export default Admin;

Answer 1

not sure but you can try to use useRouter instead

import { useRouter } from 'next/router';

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

Answer 2

尝试

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