如何使用props.match.params？

Question

我正在将 videoId 从 Dashboard 传递到 URL 路径，并使用 props.match.params.videoId 在 Videoplayer 组件中获取它。如果我在 App.js 路由中使用 VideoPlayerContainer 我会收到错误 TypeError: Cannot read property 'params' of undefined 但如果我在 App.js 路由中使用 VideoPlayer 组件而不是容器它会工作并从 URL.

知道如何使用 VideoPlayerContainer 使其工作吗？

App.js

function App() {
      return (
        <React.Fragment>
          <Switch>
        <ProtectedRoute
          exact
          path="/dashboard"
          component={DashboardContainer}
        />
            <ProtectedRoute
              exact
              path="/videoplayer/:videoId"
              component={VideoPlayerContainer}
            />
          </Switch>
        </React.Fragment>
      );
    }
    export default App;

VideoPlayerContainer

    export default function VideoPlayerContainer() {
  return (
    <React.Fragment>
      <div>
        <PublicNav />
        <VideoPlayer />
      </div>
    </React.Fragment>
  );
}

视频播放器

    export default function VideoPlayer(props) {
  const classes = useStyles();
  let videoId = props.match.params.videoId;
  const [video, setVideo] = useState([]);
  const [CommentLists, setCommentLists] = useState([]);

  const videoVariable = {
    videoId: videoId,
  };

Answer 1

只需将您通过 VideoPlayerContainer 中的 react-router 获取的 match 参数传递给您的 VideoPlayer 组件。下面的代码应该可以工作

export default function VideoPlayerContainer(props) {
  return (
    <React.Fragment>
      <div>
        <PublicNav />
        <VideoPlayer match={props.match} />
      </div>
    </React.Fragment>
  );
}

Answer 2

像这样从 React 路由器 dom 导入 useParams 钩子

import {  useParams } from 'react-router-dom';

在你的组件中

 let  { videoId } = useParams();

通过这个你可以得到url参数

如何使用props.match.params？

How to use props.match.params?

javascript

reactjs

react-props