Reactjs Nextjs路由在除Google Chrome之外的所有应用程序中都有效

我有一个很奇怪的问题。我有一个我用nextJS开发的小网站，除了Chrome之外，它在所有浏览器中都能正常工作。推送查询部分可以工作，但路径名部分不能工作，浏览器也不能重新定向。这是我的密码：

import Nav from "../components/nav";
import Router, { useRouter } from "next/router";
import {useState} from 'react';

export default function SimpleSearch({ cities }) {
  const router = useRouter();
  const { query } = router;

  const [city, setSelect] = useState('All');

  const handleChange = (e) => {
      setSelect(e.target.value)
  }

  const handleSubmit = () => {
    Router.push(
      {
        pathname: "/camps",
        query: {city, page: 1 },
      })
  };

  return (
    <section
      className="hero is-info is-fullheight"
      style={{
        backgroundImage: "url('/cover2.jpg')",
        backgroundSize: "cover",
      }}
    >
      <div className="hero-head">
        <Nav />
      </div>
      <div className="hero-body">
        <div className="container has-text-centered">
          <p className="title has-text-info is-size-1 has-text-weight-light">
            Where is your next adventure?
          </p>
          <div className="columns is-centered">
            <div className="column is-3">
              <form onSubmit={handleSubmit}>
                <div className="field has-addons">
                  <div className="control is-expanded">
                    <div className="select is-fullwidth">
                      <select className="input is-rounded" name="city" onChange={handleChange}>
                        <option value="all">All</option>
                        {cities.nodes.map((town) => {
                          return (
                            <option
                              key={town.acfDetails.city}
                              value={town.acfDetails.city}
                            >
                              {town.acfDetails.city}
                            </option>
                          );
                        })}
                      </select>
                    </div>
                  </div>
                  <div className="control">
                    <button
                      type="submit"
                      className="button is-info"
                    >
                      Bon Voyage
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

从“./components/Nav”导入导航；
从“下一个/路由器”导入路由器，{useRouter}；
从“react”导入{useState}；
导出默认函数SimpleSearch（{cities}）{
const router=useRouter（）；
const{query}=路由器；
const[city，setSelect]=useState（'All'）；
常数handleChange=（e）=>{
设置选择（如目标值）
}
常量handleSubmit=（）=>{
路由器推送(
{
路径名：“/camps”，
查询：{城市，第1页}，
})
};
返回(

你的下一次冒险是在哪里？

全部的
{cities.nodes.map（（town）=>{
返回(
{城镇.详细信息.城市}
);
})}
祝您旅途愉快
);
}

---

我觉得这有点奇怪，希望你们中的一个能帮上忙。非常感谢你

我想你打电话给路由器的方式有误

它应该是

router

，而不是

router

，因为您将

useRouter（）

声明为

router

---

另外，当您调用

handleSubmit

函数时，只需立即返回

router.push（…）

函数。不需要用大括号把它包起来。

啊，经典的形式

onSubmit

问题。您需要阻止默认的表单操作。如果没有此选项，表单提交将重新加载当前页面

const handleSubmit = (event) => { // <-- consume onSubmit event object
  event.preventDefault(); // <-- prevent default form action
  Router.push(
    {
      pathname: "/camps",
      query: {city, page: 1 },
    })
};

---

const handleSubmit=（event）=>{//你能解释一下什么是查询字符串有效，而路径名无效吗？你能解释一下你试图重定向的位置吗？所以当我点击“一路平安”时我在url中看到了这一点：但是页面只是重新加载了相同的页面，而不是推到/camps？city=all感谢您的帮助和建议。这并没有解决问题：（.但我确实整理了handleSubmit！等一下。您是否尝试在提交函数中调用
e.preventDefault
？发送表单时需要防止重新加载。您是个圣人！！！奇怪，这是唯一一款能够做到这一点的Chrome。谢谢您的帮助。@sylargaf True，我希望默认表单操作在boa中是相当标准的rd，因为这种行为早于当前使用的许多web技术。