react-router-dom学習およびケース

react-router-dom学習
3つのコア:

Routerすべてのコンポーネントに共通する最外層

Routeルーティング規則が一致し、現在の規則が一致するコンポーネント

が表示される.

Linkルーティングのジャンプコンポーネントは、aラベル[this.props.history.push(path)によってHashRouterのpathnameプロパティを変更し、Routeたちを駆動して再レンダリングし、ルーティングに一致してルーティング切り替えを実現する]

としてレンダリングされます.
その他:

HashRouter urlはhashのルーティングで、原理はwindowです.location.hash

BrowserRouterブラウザのルーティングコンポーネント

MerroryRouterメモリルーティングコンポーネント

NativeRouter nativeのルーティングコンポーネント

StaticRouterアドレス不変のルーティングコンポーネント

具体的な操作:

ダウンロード

  npm
npm install react-router-dom //   cnpm install react-router-dom
  yarn
yarn add react-router-dom //   tyarn add react-router-dom

を使用
router.js【exactは正確なマッチング】

import React from 'react'
import {HashRouter, Route, Switch} from 'react-router-dom' 

 import Login from '../pages/login';//    
 import Home from '../pages/home';//  

const BaseRoute = () => {
  return (
    <HashRouter>
      <Switch>
        <Route path="/" exact key="home" component={Home}/>
        <Route path="/home" exact key="home" component={Home}/>
        <Route path="/login" exact key="login" component={Login}/>
      </Switch>
    </HashRouter>
  )
};
export default BaseRoute;

index.js

import React from 'react';
import ReactDOM from 'react-dom'; 
import BaseRoute from './router'

ReactDOM.render(
  <React.StrictMode>
    <BaseRoute/>
  </React.StrictMode>,
  document.getElementById('root')
);

home.js

import React,{Component} from 'react'

class Home extends Component{
  optionTo(){
	this.props.history.push('/login')
  }
  render(){
    return (
      <div>
          
      <p onClick={this.optionTo.bind(this)}>     </p>
      </div>
    )
  }
}
export default Home;

login.js

import React,{Component} from 'react'

class Login extends Component{
  render(){
    return (
      <div>
             
        
      </div>
    )
  }
}
export default Login;