学会了React（3）〜React Router〜

2 年 ago
清, 扬
1 minute

React Router 可以被 paraphrase 为 “反应路由器” 或 “响应式路由器”。

    • SPAを実現してくれる。

ととを同時に使う。

yarn add react-router-domから始める。

可以转述为「浏览器路由器」。

    • こんな感じで導入する。

 

    遷移の履歴がhistoryオブジェクトの中に蓄積されるようだ。
import { BrowserRouter } from 'react-router-dom'
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>, document.getElementById('root')
);

<链接 to=”/about”>关于</链接>

    • 公式ドキュメントはこちら

stateが肝っぽい。

image.png
    現在地を元に次の行き先を決めるためにはcallback関数を渡せば良いらしい。
image.png

<路径/>

    • This is a component which is going to decide which components are rendered based on the current URL path.

 

    • ブラウザが指定するURLがpath=XXXにマッチした場合のみ、指定されたコンポーネントを描画してくれる。

 

    以下のように使用する
import { Link } from 'react-router-dom'

<div>
  <Route exact path='/' render={() => (   // exactを付けないと前方一致は全て当てはまってしまう...
                                          // propsを渡す必要があるならば、render=にcallback関数形式でコンポーネントを指定する
    <ListContacts
      onDeleteContact={this.removeContact}
      contacts={this.state.contacts}
    />
  )} />

  <Route path='/create' component={CreateContact}/>   // propsを渡す必要がなければ、component=XXXで指定できる
</div>
    また、以下のようにhistory.push(‘/xxx’)により、ページのリダイレクトが可能である。


<Route path='/create' render={({ history }) => (  // 第一引数はhistroyオブジェクトが渡されるらしい(?)
  <CreateContact
    onCreateContact={(contact) => {
      this.createContact(contact)
      history.push('/')              // history.push('/xxx')を指定する
    }}
  />
)}/>
bannerAds