Reactjs 反应：隐藏；“参数”；从url到反应路由器

我有一个页面，它从url接收一个自定义的

id

，并根据该

id

获取数据

例如：

let params = useParams();
useEffect(() => {
    axios
        .get("http://localhost:8000/api/profile/" + params.id)
        .then((response) => {
            setUsername(response.data.username);
        })
        .catch((err) => console.log(err));
}, []);

问题是参数显示在url中，我想隐藏它，如何操作？

输出的现有路由，例如

http://localhost:8000/customize/9

：

  <Route path="/customize/:id" component={Home} />

---

如果不需要，可以从路由参数中删除id。然后以不同的方式将id传递给组件，就像将道具传递给组件一样

<Route path="/customize" render={() => <Home id={9} />} />

}/>

也许你可以试试这个：

获取数据后，使用useHistory（）和history.push（）在URL中隐藏参数

import { useHistory, useParams } from "react-router-dom";

let params = useParams();
let history = useHistory();
useEffect(() => {
    axios
        .get("http://localhost:8000/api/profile/" + params.id)
        .then((response) => {
            setUsername(response.data.username);
            history.push("/customize");
        })
        .catch((err) => console.log(err));
}, []);

在

：id

之后添加一个

？

，以指定该参数是否为可选参数

<Route path="/customize/:id?" component={Home} />

如果不希望参数出现在URL中，为什么要将其放在路由中？从路径中删除它，如下所示

path=“/customize”

no？@Marc Charpentier我想将id传递到页面，以便根据该id加载元素。如果有其他替代方法，我将欢迎它。请参阅下面的我的答案，不幸的是，在正确获取数据之前，您的id仍将位于url中

<Route path="/customize/:id?" component={Home} />