-
StackOverflow 文件
-
React 教程
-
反應路由
-
示例 Routes.js 檔案,然後在元件中使用 Router Link
在頂級目錄中放置如下檔案。它定義了為哪些路徑呈現哪些元件
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'));
現在只需在整個應用程式中使用 Link
而不是 <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>
);
}