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>
  )
}

incoursePage.js

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

.......

URL中的课程提示

const slug = ownProps.match.params.slug;

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

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

我不明白当“ ownProps.location”时“ ownProps.match”没有网址信息

我所做的断点截屏如下：

能否请您解决此问题？

预先感谢

Answer 1

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