如何使用带有路由的浏览器后退按钮返回组件？

Posted 2023-02-22

【中文标题】如何使用带有路由的浏览器后退按钮返回组件？

【英文标题】：How to use browser back button with routing for going back to component?

【发布时间】：2019-02-16 04:48:50

【问题描述】：

我可以通过路由成功地从Home 组件转到TacoTypes 组件。但我正在苦苦挣扎的是从 TacoTypes 组件到 Home 组件，并使用浏览器后退按钮进行路由。

/ChooseTruck 是我在尝试从TacoTypes 组件导航回它时给出的路径名。

我已阅读文档并尝试遵循它，但它不起作用。我怎样才能做到这一点？

import React,  Component  from 'react';
import  Link, Route  from 'react-router-dom';
import Home from '../../components/Home/Home';

import Aux from '../../hoc/Aux';

class TacoTypes extends Component 
    render() 
        return (
            <Aux>
                <Link to=pathname: '/ChooseTruck' />
                <Route path="/" exact component=Home />
            </Aux>
        );
    


export default TacoTypes;

【参考方案1】：

首先，你可以使用Fragment组件代替Aux。概念很简单，实际上与Aux 的作用相同，但它是内置的，您可以立即使用。阅读更多here

现在让我们来回答您的问题。为什么你的路径是/ChooseTruck？我真的不明白这一点。当您想使用Link 组件导航回到家时，只需创建路径/，因为它位于Route 组件的下方。此外，当您只想使用后退浏览器按钮时，请使用它。

react-router-dom 正在制作路径堆栈，因此，当您导航到 TacoTypes 组件并想要返回上一个 URL 时，只需点击浏览器按钮，或使用 withRouter hoc 即可获得 goBack() 方法也在导航到上一个 URL。

【讨论】：

是的，这就是问题所在。当我点击返回按钮时，我看到 /ChooseTruck 路径，但看不到组件的实际内容。尽管如此，我将Link 和Route 中的两条路径都更改为/，但仍然没有运气。

好的。我想我知道为什么会这样。您在TacoTypes 组件中有Route 组件，由于TacoTypes 的路径不同，因此不会调用该组件。请将<Route path="/" exact component=Home /> 上移，以免与其他路线发生冲突，看看发生了什么。

我之前确实试过了，但是没用，现在又试了，还是没用:(

这看起来很奇怪。您是否检查过Link 和Route 中的路径相同？在TacoTypes 组件之外还有Route。可能最好的办法是将所有Routes 放在DOM 中的最高组件中。

是的 Link 和 Route 在我的 TacoTypes 组件中具有相同的路径。当您说 TacoTypes 组件之外的内容时，我认为这是不可能的。它需要在 return()

里面