React by Examples 第3回: ルーティング, 入力フォーム

ソースコードはこちら; netsphere / react-by-examples · GitLab

今回は Blog もどきを作ってみる。まだ、永続化はしない。また, Redux も使っていない。


スクリーンショット

ルーティング。

パッケージ追加

package.json ファイルに react-router-dom パッケージを追加する。

アプリケーションの雛形を作る。 

$ npx create-react-app router-test

ディレクトリを降りて、npm コマンドでパッケージを追加。 

$ npm install react-router-dom

npm install コマンドのオプション:

[--save-prod|--save-dev|--save-optional] [--save-exact] [--no-save]

今では --save オプションは不要。もし書いているような記事があったら、それは古いか、古いものを確認もせずコピペしている。

package.json ファイル:

JavaScript
[RAW]
  1. {
  2. "name": "03_router-routing",
  3. "version": "0.1.0",
  4. "author": "Hisashi Horikawa",
  5. "license": "MIT",
  6. "private": true,
  7. "description": "react-router-dom パッケージがルーティングを担当.",
  8. "dependencies": {
  9. "@testing-library/jest-dom": "^4.2.4",
  10. "@testing-library/react": "^9.5.0",
  11. "@testing-library/user-event": "^7.2.1",
  12. "react": "^16.13.0",
  13. "react-dom": "^16.13.0",
  14. "react-router-dom": "^5.1.2",
  15. "react-scripts": "3.4.0"
  16. },
  17. "scripts": {
  18. "start": "react-scripts start",
  19. "build": "react-scripts build",
  20. "test": "react-scripts test",
  21. "eject": "react-scripts eject"
  22. },
  23. "eslintConfig": {
  24. "extends": "react-app"
  25. },
  26. "browserslist": {
  27. "production": [
  28. ">0.2%",
  29. "not dead",
  30. "not op_mini all"
  31. ],
  32. "development": [
  33. "last 1 chrome version",
  34. "last 1 firefox version",
  35. "last 1 safari version"
  36. ]
  37. }
  38. }

今回は "react-router-dom v5.1.2以上" を使っている。react-router v3 から react-router-dom v4.0 (2017年4月) で非互換な変更があり、v3時代の記事は古くて注意が必要。一応, v3.2.6 が2020年3月にリリースされており、v3系列もメンテナンスされているようだ。

さらに v5.0 (2019年3月) が出ているが, v5 は v4 と互換性がある。

Routing

src/App.js ファイルに routing を書く。

JavaScript
[RAW]
  1. import { BrowserRouter, Route,
  2. Switch, // react-router v4: <Switch> が追加された.
  3. NavLink } from 'react-router-dom';
  5. function App() {
  6. // ルーティングは, <BrowserRouter> で囲む.
  7. // <Link> or <NavLink> も <Router> の中に入れなければならない.
  8. // exact を付けないと, 部分一致になる.
  9. return (<BrowserRouter>
  10. <nav>
  11. Posts
  12. <NavLink exact to="/">Home</NavLink>
  13. <NavLink to="/articles/">Articles</NavLink>
  14. <NavLink to="/about">About</NavLink>
  15. </nav>
  16. <Switch>
  17. <Route path="/about" component={About} />
  18. <Route exact path="/articles" component={ArticleList} />
  19. <Route path="/articles/new" component={ArticleEdit} />
  20. <Route exact path="/articles/:id" component={ArticleShow} />
  21. <Route path="/articles/:id/edit" component={ArticleEdit} />
  22. <Route exact path="/" component={Home} />
  23. <Route path="*" render={routeProps => (`Page not found`)} />
  24. </Switch>
  25. </BrowserRouter> );
  26. }

ルーティングは <BrowserRouter> で囲む。通常のテキストや HTMLタグを含めてもよい。

<Switch> 内の <Route> は排他になる。<Switch> で囲まなければ、マッチしたものがすべて描画される。

マッチ条件は path で指定する。"*" は何にでもマッチする。exact を付けると厳密マッチで, 付けなければ部分一致になる。path 末尾の "/" の有無は、よきにしてくれる。

<Link> と <NavLink> は、あたかも HTML aタグのように, ページ遷移してくれる。履歴 history への追加もよきにしてくれる。 <NavLink> は, to 値がWebブラウザの現在アドレス (現に表示されている) の場合, activeClassName, activeStyle で HTML クラス, HTMLスタイルを変更できる。

入力フォーム

いくつかポイントがある。

  • 値が変更されたときの取扱い
  • 保存時のエラー
  • リダイレクト

先にコードを示す;

JavaScript
[RAW]
  1. handleSubmit = (event) => {
  2. event.preventDefault();
  3. const title = this.state.title.trim();
  4. if (!title)
  5. return;
  7. try {
  8. const article = ArticleModel.create({
  9. id:this.state.id, title:title, body:this.state.body});
  10. this.setState({id: article.id,
  11. redirectToShow: true});
  12. }
  13. catch (err) {
  14. this.setState( {error:err} );
  15. }
  16. }
  18. onFieldChanged = (event) => {
  19. const name = event.target.name;
  20. // checkbox の場合は, 場合分け必要.
  21. const value = event.target.value;
  22. this.setState({[name]:value});
  23. if (name === 'title')
  24. this.setState( {submitEnabled: value.trim() !== ''} );
  25. }
  27. render() {
  28. if ( this.state.redirectToShow ) {
  29. return <Redirect to={`/articles/${this.state.id}`} />; /*/*/
  30. }
  32. return (<div>
  33. {Number(this.state.id)}
  34. {this.state.error ? <div>Error: {this.state.error.message}</div> : ''}
  35. <form onSubmit={this.handleSubmit} >
  36. Title: <input name="title" type="text" value={this.state.title}
  37. onChange={this.onFieldChanged} />
  38. <textarea name="body" value={this.state.body}
  39. onChange={this.onFieldChanged} />
  40. <button type="submit" disabled={this.state.submitEnabled ? '' : 'disabled'}>
  41. {Number(this.state.id) > 0 ? 'Update' : 'Create'}</button>
  42. </form>
  43. </div> );
  44. }
  45. }

フォームを作るとき, 値に変更があるたびに state を更新していくが、フィールドごとにメソッドを作っていては大変。

そこで, render() で, それぞれのHTMLタグに name属性を付けてやる。onFieldChanged では, イベントの target.name プロパティでどのタグか区別できる。このイベントは, DOM Level 2 Events で定義されている。

保存時のエラーは、やはり直接エラーメッセージを表示するのではなく、state にエラー状態を設定してやり、実際の表示は render() 内で行う。

保存が成功したときのリダイレクトも同様。JSX として <Redirect> を返すと、リダイレクトのように動作する。現在アドレスの更新もOK.