は、私はこのコードを持っているすべての私のルートレンダリングどこファイル私のApp.jsではルータのparams返す空のオブジェクト

Question

に反応：matchid：

import LiveMatch from "../containers/LiveMatch"; 

const routes = [ 
    //removed other routes for simplicity of post 
    { 
    path: "/livematch/:matchid", <--- here is the param I want 
    exact: true, 
    component:() => <LiveMatch /> 
    } 
]; 

class App extends Component { 

    render() { 
    return (
     <div> 
     <BrowserRouter> 
      <div> 
      {routes.map((route, index) => 
       <Route 
       key={index} 
       path={route.path} 
       exact={route.exact} 
       component={route.component} 
       /> 
      )} 
      </div> 
     </BrowserRouter> 
     </div> 
    ); 
    } 
} 

を今、私はコンポーネントを設定していることを、私はプリントアウトしてみてください私は空のオブジェクトを取得し続けます。

class LiveMatch extends Component { 
    constructor(props) { 
    super(props) 
    this.state = {...} 

    console.log(this.props) // returns { } 
    } 

    componentDidMount() { 
    console.log(this.props) // returns { } 
    } 

} 

コンストラクタでプロップにアクセスしようとするか、またはプロップをマウントした後でも、常にプロンプ​​トは空です。私が検索した他の投稿からは、答えはthis.props.params.matchidまたはthis.props.match.params.matchidのように単純なものでなければなりません。

質問：：matchid paramへのアクセス方法を教えてください。間違って何かしていますか？

Answer 1

なぜLiveMatchコンポーネントで使用できないのですか？

デフォルトの小道具（ルータによってコンポーネントに渡された小道具を意味する）をLiveMatchコンポーネントに渡していないためです。あなたは小道具の値を上書きしています。

解決策は、矢印機能では小道具を受け取り、コンポーネントに渡して機能します。

component: (props) => <LiveMatch {...props}/> 

または矢印機能を削除します：

component: LiveMatch