React
반응 라우팅
수색…
Routes.js 파일의 예, 구성 요소에서 라우터 링크 사용
최상위 디렉토리에 다음과 같은 파일을 넣으십시오. 어느 구성 요소를 어떤 경로로 렌더링할지 정의합니다.
import React from 'react'; import { Route, IndexRoute } from 'react-router'; import New from './containers/new-post'; import Show from './containers/show'; import Index from './containers/home'; import App from './components/app'; export default( <Route path="/" component={App}> <IndexRoute component={Index} /> <Route path="posts/new" component={New} /> <Route path="posts/:id" component={Show} /> </Route> );
이제 응용 프로그램의 시작점 인 최상위 index.js에서이 라우터 구성 요소 만 렌더링하면됩니다.
import React from 'react'; import ReactDOM from 'react-dom'; import { Router, browserHistory } from 'react-router'; // import the routes component we created in routes.js import routes from './routes'; // entry point ReactDOM.render( <Router history={browserHistory} routes={routes} /> , document.getElementById('main'));
이제 응용 프로그램 전체에서 <a>
태그 대신 Link
를 사용하는 것입니다. 링크를 사용하면 React Router와 통신하여 React Router 경로를 지정된 링크로 변경합니다. 그러면 routes.js에 정의 된대로 올바른 구성 요소가 렌더링됩니다
import React from 'react'; import { Link } from 'react-router'; export default function PostButton(props) { return ( <Link to={`posts/${props.postId}`}> <div className="post-button" > {props.title} <span>{props.tags}</span> </div> </Link> ); }
리 라우팅 비동기
import React from 'react';
import { Route, IndexRoute } from 'react-router';
import Index from './containers/home';
import App from './components/app';
//for single Component lazy load use this
const ContactComponent = () => {
return {
getComponent: (location, callback)=> {
require.ensure([], require => {
callback(null, require('./components/Contact')["default"]);
}, 'Contact');
}
}
};
//for multiple componnets
const groupedComponents = (pageName) => {
return {
getComponent: (location, callback)=> {
require.ensure([], require => {
switch(pageName){
case 'about' :
callback(null, require( "./components/about" )["default"]);
break ;
case 'tos' :
callback(null, require( "./components/tos" )["default"]);
break ;
}
}, "groupedComponents");
}
}
};
export default(
<Route path="/" component={App}>
<IndexRoute component={Index} />
<Route path="/contact" {...ContactComponent()} />
<Route path="/about" {...groupedComponents('about')} />
<Route path="/tos" {...groupedComponents('tos')} />
</Route>
);
Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow