React-router 5.2 无法从 URL 获取参数

Question

我有一个组件 ViewRestaurant.js 是 React-Router 的一部分（使用 5.2）。我正在尝试访问动态 URL 参数（/view-restaurant/:id，id）

来自 App.js 的片段（主要数据加载器）：

return (
                <Router>
                    <div>
                        <Route exact path="/" component={() => <Main 
                        restaurants={this.state.restaurants} 
                        account = {this.state.account} /> } />

                        <Route path="/view-restaurant/:id" component={() => <ViewRestaurant 
                        restaurants = {this.state.restaurants}
                        account = {this.state.account} /> } />
                    </div>
                </Router> 
);

这就是我尝试放置 Link 的 Main.js 片段的方式餐厅列表：

<Link 
                                to={{
                                    pathname: '/view-restaurant/' + key,
                                    state: { id: key }
                                }}>
                                View
</Link>

但是，当我尝试访问我传递的内容时，即 :id，与 Main.js 中的 key 相同，它不会工作。

片段来自 ViewRestaurant.js:

render() {
        const restaurants = this.props.restaurants 
        console.log(restaurants[0].name) // this works. 
        console.log(this.state.id) // this throws the error. 
        // return removed for readability
    }

错误：TypeError: this.state is null

根据 documentation，我们应该能够创建状态并通过 link 传递它。我 100% 确定我误解了文档，但我只是不知道如何解决这个错误。

Answer 1

我终于明白了。只是不要将经典组件与returns东西的渲染功能一起使用。

React Router v5（在我的例子中是v5.2）中的方式是通过函数传递道具并通过特殊函数获取参数。对于我遇到的这个特定问题，只需要使用新的 React-Router 文档中的 useParams() 并完全重构我的代码以使用函数和挂钩。

我强烈建议放弃使用 render() 函数的经典类并转向使用新的 React-Router 的改进编码方式。

教你传道具的Youtubevideo

Documentation 在 useParams()

我是怎么解决的：

function ViewRestaurant({ restaurants }) {
    const { id } = useParams();
}

and in Main.js（注意key是通过简单的js映射获取的）

<Link to={{ pathname: '/view-restaurant/' + key}}>View</Link>

最后，App.js

<Route path="/view-restaurant/:id">
    <ViewRestaurant 
    restaurants={this.state.restaurants} />
</Route>

React-router 5.2 无法从 URL 获取参数

React-router 5.2 failure to get parameter from URL

react-router

react-router-dom

react-router-v5