mapStateToProps 获取 url 参数？

Question

我正在使用带有 redux 的 create-app-react 和带有 5.2.0 版本的 react-router-dom。

在 App.js 中

function App() {
  return (
    <BrowserRouter>
      <div className="container">
        <Header />
        <Switch>
          <Route exact path="/" component={HomePage} />
          <Route path="/about" component={AboutPage} />
          <Route path="/courses" component={CoursesPage} />
          <Route path="/course" component={ManageCoursePage} />
          <Route path="/course/:slug" component={ManageCoursePage} />
          <Route component={PageNotFound} />
        </Switch>
      </div>
    </BrowserRouter>
  )
}

在 coursePage.js 中

.......
.......
function mapStateToProps(state, ownProps) {
  const slug = ownProps.match.params.slug
........
}
.......
export default connect(mapStateToProps, mapDispatchToProps)(ManageCoursePage)

.......

URL 中的课程信息

const slug = ownProps.match.params.slug;

但是，我发现“params”是一个空对象。为了解决这个问题，我做了以下工作

const slug = ownProps.location.pathname.split('/').reverse()[0];

我不明白“ownProps.location”时“ownProps.match”如何没有url信息

我所做的断点的屏幕截图如下：

您能帮忙解决这个问题吗？

提前致谢

Answer 1

您的路线<Route path="/courses" component={CoursesPage} /> 没有任何参数。例如，您可以将其重写为<Route path="/courses/:courseId" component={CoursesPage} />。在您可以在 CoursesPage 组件中访问 ownProps.match.params.courseId 之后。