mapStateToProps 获取 url 参数？

Posted 2023-02-22

【中文标题】mapStateToProps 获取 url 参数？

【英文标题】：mapStateToProps get url param?

【发布时间】：2020-09-19 15:11:56

【问题描述】：

我正在使用带有 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信息

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

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

提前致谢

【参考方案1】：

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

【讨论】：

我已经使用参数 id <Route path="/course/:slug" component=ManageCoursePage /> 路由但仍然是同样的问题！

你有两条路线适合截图：path="/course"和path="/course/:slug"。 React 路由器优先。所以你需要删除<Route path="/course" component=ManageCoursePage />

我删除了<Route path="/course" component=ManageCoursePage />，一切正常，但我需要path="course" 和path="/course/:slug"，因为它是不同的页面路径

好的，然后将path="/course"移到path="/course/:slug"下方。并将exact 添加到<Route path="/course/:slug" exact component=ManageCoursePage />