はTypeError：未定義（もはやアクセス可能this.props.params）のプロパティ 'postId' を読み取ることができません

Question

OS：Windowsの10
プロリアクト - ルータ：4.1.1
が反応：だから15.5.4

、私は反応ルータv2からv4に移行していますが、上記のparamの問題が発生しています。欠落しています。

view/:postId (/view/0)のルートは一致していますが、レンダリングされたコンポーネントはthis.props.params.postIdの存在を検出していないときにエラーが発生します。

ここで問題は何ですか？

次のように私のルーティングコンポーネント（Main.js）は次のとおりです。

render() { 
 
    return (
 
     <div> 
 
     <h1> 
 
      <Link to="/">Flamingo City</Link> 
 
     </h1> 
 
     <Switch> 
 
      <Route path={`${this.props.match.url}`} exact render={() => (
 
      <PhotoGrid {...this.props.children} {...this.props} /> 
 
      )} /> 
 
      <Route path={`${this.props.match.url}view/:postId`} render={() => (
 
      <Single {...this.props.children} {...this.props} /> 
 
      )} /> 
 
      <Route path={`${this.props.match.url}login`} component={LoginUser} /> 
 
     </Switch> 
 
     </div> 
 
    ); 
 
    }

そして、次のように私のレンダリングコンポーネント（Single.js）は次のとおりです。

class Single extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    } 
 
    
 
    render() { 
 
    const postId = this.props.params.postId; 
 
    const { data, i, key } = this.props; 
 
    
 
    if (data.loading) { 
 
     return <p>Loading ...</p>; 
 
    } 
 
    if (data.error) { 
 
     return <p>{data.error.message}</p>; 
 
    } 
 
    return (
 
     <div className="single-photo"> 
 
     <Photo key={key} postIndexID={postId} post={data.allPostses[postId]} postId={data.allPostses[postId].id} {...this.props} /> 
 
     <Comments key={key} post={data.allPostses[postId]} postId={data.allPostses[postId].id} postIndexID={postId} {...this.props} /> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
export default Single;

更新：

これでparamsはthis.props.match.paramsを実行することでアクセスされるように見えますが、devToolsで検査するとオブジェクトは空です。ここの問題は何ですか？次のように解決策は、ルートをリファクタリングすることでした

Answer 1

：

  <Route path={`${this.props.match.url}view/:postId`} render={(props) => (
 
      <Single {...this.props} {...props} /> 
 
      )} />