你用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'));

在这里，您将它包裹在Router来自 from 的下面react-router，然后在那里传递您要使用的历史props和路线props。您可以使用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 code to add user to the list of users
    browserHistory.push("/");
}

.......
render(){
   return (
       //Add user form
       <button onClick={this.onClick.bind(this)}>Add User</button>
   );
}

希望这可以帮助。

除此之外browserHistory，您还hashHistory可以通过从react-router.

import {hashHistory} from 'react-router';

hashHistory.push('/addUser')