无法在 useParams 读取未定义的属性“匹配” - React Hooks

Posted 2023-02-22

【中文标题】无法在 useParams 读取未定义的属性“匹配” - React Hooks

【英文标题】：Cannot read property 'match' of undefined at useParams - React Hooks

【发布时间】：2021-02-15 19:27:45

【问题描述】：

我正在尝试在 React Router 中发送参数并遇到错误

参考代码 在我的 Route.js 中，我添加了 browserRouter 和 Route

function AppRoute() 
    const classes = useStyles();
    return (
        <BrowserRouter>
            <div className=classes.root>
                <div className='App-header'>

                    <Grid container justify="center" className=classes.root spacing=2 alignItems="center">
                        <Grid item xs=3>

                            <Paper className=classes.paper >
                                <Link to='/'>Dashboard</Link>
                            </Paper>
                        </Grid>

                        <Grid item xs=3>
                            <Paper className=classes.paper >
                                <Link to='/create'>Create</Link>
                            </Paper>
                        </Grid>
                        <Grid item xs=3>
                            <Paper className=classes.paper >
                                <Link to="/edit/john">Edit</Link>
                            </Paper>
                        </Grid>
                        <div>
                            <Switch>
                                <Route exact path="/" component=Dashboard exact=true />
                                <Route exact path="/create" component=Create />
                                <Route path="/edit/:name">
                                    <Edit />
                                </Route>
                            </Switch>
                        </div>
                    </Grid>



                </div>
            </div>

        </BrowserRouter>


    )

Edit.js

function Edit() 
    const  name  = useParams();
    return (
        <div>
            Name - name
        </div>
    )

【问题讨论】：

你使用的是什么版本的 react-router-dom？您是否可以创建一个 running 代码框来重现此问题，以便我们进行实时调试？

您使用的是useContext 而不是useParams。这就是错误所暗示的。

@johnnypeter 这很可能是useParams 钩子实现。它正在访问最近的Router 的路由上下文。

【参考方案1】：

根据您收到的错误，我们可以得出以下结论：

Cannot read property 'match' of undefined

这发生在第 40 行，您可以从屏幕截图中看到。

const match = useContext(Context).match

表示这部分调用正在返回undefined：

useContext(Context) === undefined

换句话说，这意味着Context.Provider 在您的组件树的那个点不可用。

您应该在由<Route/> 呈现的组件内调用它。否则它将找不到Context，您将收到此错误。仔细检查。

发件人：https://reactrouter.com/web/api/Hooks/useparams

import React from "react";
import ReactDOM from "react-dom";
import 
  BrowserRouter as Router,
  Switch,
  Route,
  useParams
 from "react-router-dom";

function BlogPost() 
  let  slug  = useParams();       // IT'S CALLED INSIDE BlogPost
  return <div>Now showing post slug</div>;


ReactDOM.render(
  <Router>
    <Switch>
      <Route exact path="/">
        <HomePage />
      </Route>
      <Route path="/blog/:slug">
        <BlogPost />                /* <<< AND BlogPost IS RENDERED INSIDE A <Route/> */
      </Route>
    </Switch>
  </Router>,
  node
);

【讨论】：

彻底解释