私はサンプルのreactjsアプリケーションを学習中です。私はユーザーのリストと新しいユーザーを追加するための追加ボタンを一覧表示するページを持っています。ReactJS Navigation
追加ボタンをクリックすると、ユーザーフォームに移動して新しいユーザーを作成する必要があります。
ユーザーフォームの[送信]ボタンをクリックすると、最初のページに戻り、新しいユーザーと一緒にユーザーの一覧が表示されます。
反応するページ間を移動するにはどうすればよいですか？
反応ルータで実行します。ここにはreact router tutorialがあります。
あなたのユーザーのリストは、サイトを開いたときに表示される最初のページであるため、インデックスページであり、他のすべてのページはルートです。
したがって、あなたがこのような何か行うことができます。
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'));
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;
：
をあなたのルートを持つ別のファイルを作成することができます
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}は、ルートファイルからのすべてのルートをレンダリングします。
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>
);
}
し、追加のユーザーフォーム上のボタンのクリックで、同じプロセス、あなただけnavgateする必要がありますので、あなたがbrowserHistoryと広告のユーザーフォームに移動することができ、追加のユーザーボタンonClickイベント、オン
"/"とインデックスのルートに、このように：
import { browserHistory } from 'react-router;
.........
onClick(){
//Your code to add user to the lst of users
browserHistory.push("/");
}
.......
render(){
return (
//Add user form
<button onClick={this.onClick.bind(this)}>Add User</button>
);
}
は、この情報がお役に立てば幸いです。
browerHistoryから離れて、反応ルータからインポートすることでhashHistoryを使用することもできます。
import {hashHistory} from 'react-router';
hashHistory.push（ '/ addUser'）