React Router에 매개변수를 전달하는 경로

13179 단어 React
전편 보도의 후속이다.
React Router 사용
멤버 일람표 같은 걸 만들어서 멤버의 ID를 매개 변수로 건네주고 해당 ID를 표시하는 사용자를 만든다.
src/MembersList.js
import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch
} from 'react-router-dom'

const members = [
  {id: 1, name: 'Hisashi', info: 'リードギター'},
  {id: 2, name: 'TERU', info: 'ボーカル'},
  {id: 3, name: 'TAKURO', info: 'ギター'},
  {id: 4, name: 'JIRO', info: 'ベース'},
]

const MemberListApp = () => (
  <Router>
    <div style={{margin: 20}}>
      <div>
        <Switch>
          <Route path='/user/:id' component={MemberInfo} />
          <Route component={MemberList} />
        </Switch>
      </div>
    </div>
  </Router>
)

const Header = () => (
  <h1>メンバーリスト</h1>
)

class MemberList extends React.Component {
  render () {
    const memberList = members.map(e => (
      <li key={e.id}>
        <Link to={'/user/' + e.id}>{e.name}</Link>
      </li>
    ))
    return (
      <div>
        <Header />
        <ul>{memberList}</ul>
      </div>
    )
  }
}

class MemberInfo extends React.Component {
  render () {
    const {params} = this.props.match
    const id = parseInt(params.id, 10)
    const member = members.filter(e => e.id === id)[0]
    return (
      <div>
        <div>{id}: {member.name} - {member.info}</div>
        <hr />
        <div><MemberList /></div>
        <div><Link to='/'>TOP</Link></div>
      </div>
    )
  }
}

export default MemberListApp

<Route path='/user/:id' component={MemberInfo} />의 부분, component을 사용할 때router는 React.createElement를 실행하여React의 요소를 생성합니다.
ReactTraining/react-router index.js에 렌더링 방법을 추가합니다.
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import MemberListApp from './MembersList'
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render(<MemberListApp />, document.getElementById('memberList'));
registerServiceWorker();
public/index.html<div id="memberList"></div>.
브라우저의 동작은 다음과 같습니다.

좋은 웹페이지 즐겨찾기