React Router で Path の値をコンポーネントに渡す方法

February 26, 2020

やりたいこと

React Router で ‘/user/:id’ のようなパスにアクセスされた際に表示されるコンポーネントに :id の部分を渡してあげたい、という内容です。
パスの値によって表示されるコンポーネントの内容が動的に変化する場合等に有効です。

実装

RootContainer にて “/view-case/:case_id” への Route が定義されてます。
ここで、match を渡しておくのがポイントです。

class RootContainer extends Component {  
  
    render() {  
  
        return( 
            <Container maxWidth="false">  
              <CssBaseline/>  
              <Header/>  
              <Route path="/list-cases" component={() => <ListCaseContainer/>}/>  
              <Route path="/create-case" component={() => <CreateCaseContainer/>}/>  
              <Route path="/view-case/:case_id" render={({match}) => (<ViewCaseContainer match={match}/>)} />  
              <Route exact path="/" component={() => <Redirect to="/list-cases" />}/>  
            </Container>  
       );  
    }  
}  
  
export default RootContainer;

実際に Link は以下のように貼られてます。

if (!showResCase) {  
                           if (row.status != "RES") {   
                               return ( 
                                   <TableRow key={row.name} >  
                                     <TableCell>{row.id}</TableCell>  
                                     <TableCell><Link to={'/view-case/' + row.id}>{row.title}</Link></TableCell>  
                                     <TableCell>{row.severity}</TableCell>  
                                     <TableCell>{status}</TableCell>  
                                     <TableCell>{row.created_at}</TableCell>  
                                   </TableRow>  
                              );  
                           }   
                       } else {  
                           return ( 
                               <TableRow key={row.name} >  
                                 <TableCell>{row.id}</TableCell>  
                                 <TableCell><Link to={'/view-case/' + row.id}>{row.title}</Link></TableCell>  
                                 <TableCell>{row.severity}</TableCell>  
                                 <TableCell>{status}</TableCell>  
                                 <TableCell>{row.created_at}</TableCell>  
                               </TableRow>  
                          );  
                       }

で、ViewCaseContainer では this.props.match.params.case_id と参照することによってパスを参照することが可能となります。

class ViewCaseContainer extends Component {  
  
    render() {  
        const caseId = this.props.match.params.case_id;  
        return( 
            <h1>Viewing Case #{caseId}</h1>  
       );  
    }  
}  
  
export default ViewCaseContainer;