Chapter 03

ナビゲーション

snaga
snaga
2022.05.08に更新
このチャプターの目次
  1. ページ遷移

ページ遷移

react-router を使う。

BrowserRouter/Switch/Route でアプリ内のページとコンポーネントのマッピングを定義する。

// index.js
import { BrowserRouter, Route, Switch } from 'react-router-dom';

// Routeを使って各Pathとコンポーネントを紐づける。
ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <Switch>
        <Route exact path="/events/new" component={EventNew} />
        <Route exact path="/" component={EventIndex} />
        <Route exact path="/events/:id" component={EventShow} />
      </Switch>
    </BrowserRouter>
  </Provider>,
  ...
);

リンクを配置するコンポーネントに Link を配置する。

// components/events_index.js
import { Link } from 'react-router-dom';

class EventIndex extends Component {
  return (
    <Link to={"/events/new"}>New Event</Link>
  );
}

// components/events_show.js
import { Link } from 'react-router-dom';

class EventShow extends Component {
  return (
    <div>{this.props.match.params.id}</div>
  );
}