使用 React Router 设置工作 URL

Question

我在设置 React 路由器时遇到了一些问题，非常感谢一些建议。我有一个包含多个页面的应用程序，我希望该应用程序在 url 中显示我所在的页面，并能够通过 url 转到特定页面。但我似乎无法让它工作。

路由路径为： <Route path="/page/{:id}" component={Body} />

它正在调用 Body，这是我的主要 Class 组件，大部分代码和逻辑都在其中。但是我看到的大多数线程和教程都使用 useEffect 或 useParams，这不能在类组件中完成。

该应用程序很简单，它所做的只是在页面之间切换并在每个页面上调用 api 以获取不同的文本和按钮编号。

所以我现在要做的是在我的按钮周围加上一个链接标签，其页码为<Link key={index} to={`/page/${links.label}`}>。这些按钮位于单独的功能组件中。我根据我所在的页面看到了 url 的变化。但我想设置它，这样我就可以直接输入网址。

按钮：

const renderPageNumbers = apiPagingSliced.map((links, index ) => {
        return <Link key={index} to={`/page/${links.label}`}>
                    <button key={index} id={links.label}
                    onClick={props.handleClick}
                    >{links.label}
                    </button>
                </Link>
        })

而且它看起来很不完整。我尝试使用 useParams，但无法正常工作。

Answer 1

将此添加到您的 Body 组件中，以便当 id 参数更改您的页面时也可以更新并更新您的 localStorage

componentDidUpdate(prevProps, prevState, snapshot){
        if(prevProps){
            if(prevProps.match.params.id !== this.props.match.params.id){
                const id = this.props.match.params.id;
                localStorage.setItem("currentPage", id)
                this.setState ({
                    currentPage: id});
                this.fetchApi(id);
            }
        }
    }