web-dev-qa-db-ja.com

Reactjs-Routeの `component`と` render`

react-router-dom（v4.3.1）のRouteの使用に関して2つの疑問があります。

  1. componentでrenderとRouteを使用する場合：

    <Route exact path='/u/:username/' component={ProfileComponent} />
<Route exact path='/u/:username/' render={() => <ProfileComponent />} />
  2. [〜＃〜] url [〜＃〜]の変数usernameに両方の方法でアクセスする方法は？
javascriptreactjsroutesreact-router-dom
7
Sreekar Mouli

コンポーネントをcomponentプロパティに渡すと、コンポーネントはprops.match.paramsオブジェクトのパスパラメータを取得します。つまり、例ではprops.match.params.usernameです。

class ProfileComponent extends React.Component {
  render() {
    return <div>{this.props.match.params.username}</div>;
  }
}

renderプロップを使用する場合、render関数に与えられたプロップを介してパスパラメータにアクセスできます。

<Route
  exact
  path='/u/:username/'
  render={(props) => 
    <ProfileComponent username={props.match.params.username}/>
  }
/>

renderプロップはコンポーネントに追加のプロップを渡す実際の方法を提供しないため、ルートを含むコンポーネントからのデータが必要な場合は、通常componentプロップを使用します。

4
Tholle