示例 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>
  );
}