Question

应用在网格 <Photo> 中显示所有照片 <PhotoGrid>，然后一旦点击，<Photo> 中的函数将 URL 更改为 history.push，并且路由器呈现 {{1} } 基于使用 <Single> 钩子的 URL。

useParams -> PhotoGrid（更改 URL onClick） -> Photo 基于 URL（useParams）。我一定是搞砸了什么，因为 useParams 返回 undefined。

感谢所有先进的想法。应用程序

Single

Photogrid.js

class App extends Component {
  render() {
    return (
      <>
        <Switch>
          <Route exact path="/" component={PhotoGrid}/>
          <Route path="/view/:postId" component={Single}/>
        </Switch>
      </>
    )
  }
}
export default App;

在照片中我使用 history.push 更改 URL

export default function PhotoGrid() {
    const posts = useSelector(selectPosts);

    return (
        <div>
            hi
            {/* {console.log(posts)} */}
            {posts.map((post, i) => <Photo key={i} i={i} post={post} />)}
        </div>
    )
}

Single.js

const selectPost = () => {
  (...)
  history.push(`/view/${post.code}`);
  };

Answer 1

使用 useParams 时，您必须将解构 "/view/:postId" 与路径 import { useParams } from "react-router-dom"; export default function Single() { let { postId } = useParams(); console.log("this.context:", postId ) return ( <div className="single-photo"> {/* render something based on postId */} </div> ) } 匹配。

工作 Single.js

{{1}}

useParams 钩子在反应功能组件中返回未定义

1 个答案: