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>
.브라우저의 동작은 다음과 같습니다.
Reference
이 문제에 관하여(React Router에 매개변수를 전달하는 경로), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/sho7/items/75da276f6b6e8bb5abce텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)