您可以使用React Router来完成。这是React Router教程。
用户列表是打开站点时显示的第一页，即您的索引页，所有其他页均为路线。
因此，您可以执行以下操作：
您可以使用路线创建一个单独的文件：
import UserList from 'path/to/user/list';import AddUserForm from 'path/....';const routes = ( <Route path="/" component={App}> <IndexRoute component={UserList}/> <Route path="addUser" component={AddUserForm}/> </Route>);export default routes;然后，您
index.js应该看起来像这样：
import React from 'react';import ReactDOM from 'react-dom';import {Router, browserHistory} from 'react-router';import routes from 'path/to/routes';ReactDOM.render(<Router history={browserHistory} routes={routes}/>, document.getElementById('root'));在这里，您将其包装在
Routerfrom的来源之下，然后在其中
react-router传递您要使用的历史道具并路由该道具。您可以使用
browserHistory和
hashHistory。BrowserHistory显示更干净的URL。使用哈希历史记录，您可以得到类似
someurl.com/#/something
现在，在您的应用中，您可以执行以下操作：
export default class App extends Component { render() { return (<div> {this.props.children}</div> ); }}{this.props.children} 从路由文件渲染所有路由，因为您已经为主路由指定了App组件。在添加用户按钮onClick事件上，您可以使用browserHistory导航到添加用户表单，因此：
import { browserHistory } from 'react-router;.........onClick(){ browserHistory.push("/addUser");}.......render(){ return ( //Userlist with the button <button onClick={this.onClick.bind(this)}>Add New user</button> );}然后在按钮上单击添加用户表单，相同的过程，您只需要使用导航到索引路径
"/"，因此：
import { browserHistory } from 'react-router;.........onClick(){ //Your pre to add user to the list of users browserHistory.push("/");}.......render(){ return ( //Add user form <button onClick={this.onClick.bind(this)}>Add User</button> );}希望这可以帮助。
