ReactJS 导航

Question

我正在开发一个示例reactjs应用程序(在学习过程中)。我有一个页面，其中列出了用户列表和一个用于添加新用户的添加按钮。

当我单击添加按钮时，我应该导航到用户表单以创建新用户。

单击用户表单中的提交按钮后，它应该导航回第一页，其中应列出用户列表以及新用户。

如何在 React 中的页面之间导航？

Answer 1

你用 react 路由器来做到这一点。这是react router tutorial .

您的用户列表是您打开网站时显示的第一页，因此这是您的索引页，所有其他页面都是路由。

因此你可以做这样的事情:

您可以使用您的路线创建一个单独的文件:

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

在这里，您将其包装在来自 react-router 的 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 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>
   );
}

希望这有帮助。