ReactJS导航

Question

我正在研究一个示例reactjs应用程序(在学习过程中).我有一个列出用户列表的页面和一个添加新用户的添加按钮.

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

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

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

Answer 1

你用反应路由器做到了.这是react路由器教程.

您的用户列表是打开站点时显示的第一个页面,因此这是您的索引页面,所有其他页面都是路径.

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

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

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

在这里,你把它包在index.js它来源于Router,在那里你PAS历史要使用和路线.您可以使用browserHistory和hashHistory.BrowserHistory显示更清晰的网址.使用哈希历史,你有类似的东西react-router

现在在您的应用程序中,您可以执

export default class App extends Component {
    render() {

        return (
           <div>
              {this.props.children}
           </div>
        );
    }
}

browserHistory 从路径文件中呈现所有路径,因为您有主路径的指定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>
   );
}

然后在按钮上单击添加用户表单,同样的过程,您只需要导航到索引路径hashHistory,因此:

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

希望这可以帮助.