Блог

Я работаю над образцом приложения reactjs (в процессе обучения). У меня есть страница, на которой указан список пользователей и кнопка добавления для добавления нового пользователя.

Когда я нажимаю кнопку добавить, я должен перейти к форме пользователя, чтобы создать нового пользователя.

После того, как я нажму кнопку отправки в форме пользователя, он должен вернуться на первую страницу, где должен быть указан список пользователей вместе с новым пользователем.

Как перемещаться между страницами в react?

Вы делаете это с помощью маршрутизатора react. Вот руководство по маршрутизатору 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'));
 

Здесь вы оборачиваете его в соответствии Router с тем, что происходит react-router , и там вы передаете history prop, который вы хотите использовать, и routes prop. Вы можете использовать browserHistory и hashHistory . История браузера показывает более чистые URL-адреса. С историей хеширования у вас есть что-то вроде someurl.com/#/something

Теперь в вашем приложении вы можете сделать следующее :

 export default class App extends Component {
    render() {

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

{this.props.children} отображает все маршруты из файла маршрутов, поскольку вы указали компонент приложения для основного маршрута.

При нажатии кнопки добавить пользователя на событие 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')