作为反应，我如何重定向回我所在的当前页面并包含一个 url 参数答案

【问题标题】：In react, how do I redirect back the to current page I'm on and include a url parameter作为反应，我如何重定向回我所在的当前页面并包含一个 url 参数
【发布时间】：2021-06-19 12:42:29
【问题描述】：

我仍在研究我的反应技能，并且在重定向回我所在的当前“页面”（组件/控件）时遇到了困难。下面是我在 app.js 文件中的一些示例代码，然后是我在“PageTwo.js”文件中的 sn-p。目前，当我单击复选框图标时，页面似乎会重定向，但我的表格数据都没有显示，或者说它可能是我的表格控件没有重新加载。任何帮助将不胜感激。

app.js

        <Switch>
          <Route path="/" exact component={SignUp} />
          <Route path="/PageTwo" exact component={PageTwo} />
          <Route path="/PageThree/:id" exact component={PageThree} />
        </Switch>

PageTwo.js

.
.
.
    const myRedirect = (stdId) => {
        history.push('/PageTwo/' + stdId);
    }
.
.
.
    useEffect(() => {
        let ref = Firebase.database().ref('/studentTime');
        var refQuery = ref.orderByChild("TimeOut").equalTo("");

        refQuery.on("value", studentTimeLog => {
            theTimeLogList = O2A(studentTimeLog);
            getTheTimeLog(theTimeLogList);
        });
        
        let userRef = Firebase.database().ref('/users');
        var userQuery = userRef.orderByChild("Email").equalTo(authContext.userEmail);
        //console.log(userQuery);
        userQuery.once("value", function (snapshot) {
            snapshot.forEach(function (child) {
                if (child.val().Role === "ADMIN") {
                    authContext.isAdmin = true;
                    console.log(authContext.isAdmin);
                }
            });
        });
    }, []);

.
.
.
                                <TableCell align="center">
                                    <CheckIcon onClick={() =>myRedirect(row.StudentId)}/>
                                </TableCell>
                            </TableRow>

【问题讨论】：

标签： reactjs react-router react-hooks

【解决方案1】：

因为第 2 页的Route 是exact，它只会显示它是否完全正确，所以当您添加参数时，它不再完全正确。只需删除 exact 关键字即可。

【讨论】：

今晚或早上我会试试这个。谢谢。
我试过了，但 URL 路由本身确实发生了变化，但我希望它也能命中我的 useEffect() 方法。为什么这不会发生？

【解决方案2】：

请检查您的路由器。

<Route path="/PageTwo" exact component={PageTwo} />
<Route path="/PageThree/:id" exact component={PageThree} />

const myRedirect = (stdId) => {
  history.push('/PageTwo/' + stdId);
}

If you mean PageTree, follow this method.
<Route path="/PageThree/:id" exact component={PageThree} />
   . . .
const [stdId, setStdId] = useState('');
const myRedirect = () => {
  history.push('/PageThree/' + stdId);
}

或使用 window.location.reload();而不是 history.push()

【讨论】：

我的意思是返回PageTwo页面。

【解决方案3】：

我知道我需要做什么。好吧，让我这么说吧，我找到了A WAY。

如果我将当前 URL 添加到第二个可选数组参数，那么它将再次按我的意愿访问我的 useEffect()。让我马上说，我不是 100% 确定这是 最好的方法，但它确实符合我的迫切需要/愿望，以确保如果 url 发生变化，我的 useEffect() 会被命中。它适用于我正在寻找的东西，因为它重新渲染了我的网格/表格，这正是我想要的。如果有更好的方法来实现这一点，那么我完全愿意学习。我的主要目标是让这个页面在获取新 URL（添加了我的参数）的同时“重新呈现”我的控件。

我的 app.js 切换/路由代码

    <Switch>
    <Route path="/" exact component={SignUp} />
    <Route path="/PageTwo/:stdid?" component={PageTwo} />
    <Route path="/PageThree/:id" exact component={PageThree} />
    </Switch>

我的新 useEffect()

    useEffect(() => {
        let ref = Firebase.database().ref('/studentTime');
        var refQuery = ref.orderByChild("TimeOut").equalTo("");

        refQuery.on("value", studentTimeLog => {
            theTimeLogList = O2A(studentTimeLog);
            getTheTimeLog(theTimeLogList);
        });
        
        //https://stackoverflow.com/questions/48240734/how-to-query-in-firebase-in-react
        let userRef = Firebase.database().ref('/users');
        var userQuery = userRef.orderByChild("Email").equalTo(authContext.userEmail);
        //console.log(userQuery);
        userQuery.once("value", function (snapshot) {
            snapshot.forEach(function (child) {
                if (child.val().Role === "ADMIN") {
                    authContext.isAdmin = true;
                    console.log(authContext.isAdmin);
                }
            });
        });
    }, [window.location.href]);

【讨论】：