react router

一、ルーティング基礎コンポーネント
1、ルート優勢:一回だけ要求する.2、ルーティングの原理:aラベルはurlを変更するが、デフォルトのジャンプの要求を阻止し、e.preventDefault()で阻止し、history.を通過する.push()ブラウザのurlを変更します.最後にurlで異なるコンポーネントレンダリングをマッチングします.Linkコンポーネント実装原理

const Link=({to,children}) =>(
    {
e.preventDefault();
history.push(to);
}}>
{children}
)

Routeコンポーネント実装の原理はurlマッチングパスを異なるコンポーネントにレンダリングします.

const Route=({path,component}) =>{
  const pathname=window.location.pathname;
  if(pathname.match(path)){
    return (
       React.createElement(component)
      )
  }else{
    return null;
  }
}

Redirectコンポーネント実装原理Redirectコンポーネントはlinkコンポーネントと似ていますが、クリック、直接ジャンプ、何もレンダリングせず、ブラウザのurlパスを変更するだけです.

class Redirect extends React.Component {
  static contextTypes={
    history:PropTypes.object
  }
  componentDidMount(){
    const history=this.context.history;
    const to=this.props.to;
    history.push(to)
  }
  render(){
    return null
  }
}

3、ルート使用

Route 1)pathとcomponentは、URLに一致するパスとレンダリングが必要なコンポーネント

を指定する.

pathとcomponentの2つの属性のほかにできるよその他の特性2)render

 (
        

          Welcome! Select a body of saline water above.
        
      )} />

質問:Routeコンポーネントでurlのpathnameと一致するか否かを判断するにはmatch,if(pathname.match(path))を用いるのでurlが’http://localhost:3000/atlantic/ocean‘の場合、path=’/atlantic‘とpath=’/atlantic/ocean’は一致する.この2つのコンポーネントはレンダリングされます.正確なマッチングが必要な場合はexactという属性を付ける必要があります

 (
        

          Welcome! Select a body of saline water above.
        
      )} />

4、SwitchがRouteをSwitchに書いた場合、パスは一度しか一致せず、後のものに一致してもレンダリングに成功しません.Switchコンポーネントの最後のエッジでは、前に一致するルーティングがなく、最後のルーティングのデフォルトレンダリングを行うデフォルトマッチングを防止できます.つまり、最後のルーティングはすべてのパスに一致します.

 
        (
            

                
Atlantic Ocean — Again!
                

                  Also known as "The Pond."
                
            
        )}/>
        
        
        
         (
        

          Welcome! Select a body of saline water above.
        
      )} />
        (
            

            

              Error! No matches for {location.pathname}
            
          
  
        )}/>
 

二、動的ルーティング