How to use the next/router.useRouter function in next

const Page = () => {
  const router = useRouter()
  const { name, id } = router.query

  return (
    <>
      <p>
        Blog post {name} comment {id || '(all)'}
      </p>
    
  )
}

const $comment = ({ gipQuery }) => {
  const router = useRouter()
  const { query } = router

  return (
    <>
      <p>
        I am {query.comment} on {query.name}
      </p>
      <span>gip {gipQuery &amp;&amp; gipQuery.name}</span>
    
  )
}

const CreateProject = () => {
  const router = useRouter();
  const dispatch = useDispatch();
  const [name, setName] = useState('');
  const [subLabel, setSubLabel] = useState('');
  const [costs, setCosts] = useState('');
  const [tags, setTags] = useState([]);
  const [description, setDescription] = useState('');
  const [users, setUsers] = useState([]);
  const [startDate, setStartDate] = useState(new Date());
  const [dueDate, setDueDate] = useState(new Date());

  console.log(users);
  const addAssignee = (val) => {
    setUsers(((prevState) => ([...prevState, val.user])));
  };

  const removeAssignee = (val) => {

export default () => {
  const router = useRouter();
  return (
    
      { ({ loaded, mappers }) =>
        loaded &&  }
    
  );
};

const LoginForm: React.FC = props => {
  const router = useRouter()

  const [apiError, setApiError] = useState()
  const [loading, setLoading] = useState(false)

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    props.form.validateFields((err, body) => {
      if (!err) {
        setLoading(true)
        request("/api/auth", {method: "POST", body}).then(
          response => {
            if (response.ok) {
              cookie.set("token", response.value.token, {expires: 7})
              router.replace("/")
            } else {
              setLoading(false)

const Detail = ({ readme }) => {

  const router = useRouter()

  //根据路由缓存
  useCache(genDetailCacheKey(router), {
    readme
  })

  return (
    
  )
}

function Private({ fromPath = '/', children }: Props) {
  const { replace } = useRouter();

  useEffect(() => {
    const userIsAuthenticated = checkIsAuthenticated();
    const userTokenExpired = checkIsExpired();
    const RoutePayload = {
      pathname: '/login',
      query: { from: fromPath },
    };

    if (!userIsAuthenticated) {
      replace(RoutePayload);
    }

    if (userTokenExpired) {
      replace(RoutePayload);
    }

export const PublicHome = ({ file }: PublicHomeProps) => {
  const router = useRouter();
  const { username } = router.query as { username: string };

  return (
    
      <header>
        
          {username}
          
            Stories
          
        
      </header>
      
        {file.stories.length === 0 &amp;&amp; No stories yet}
        {file.stories.map(story =&gt; (

export default React.memo(function ConnectedCreateProject(p) {
  const dispatch = useDispatch()
  const router = useRouter()

  return 
})

export const Protected = ({ children }: Props) => {
  const router = useRouter();
  const [state, setState] = useState({
    loggedIn: config.isServer ? false : !!userSession.isUserSignedIn(),
    loggingIn: config.isServer ? true : !!userSession.isSignInPending(),
  });

  useEffect(() => {
    if (userSession.isUserSignedIn() && !state.loggedIn) {
      setState({
        loggedIn: true,
        loggingIn: false,
      });
    } else if (userSession.isSignInPending()) {
      userSession
        .handlePendingSignIn()
        .then(() => {
          setState({