デバイスの大きさに基づいて反応ルートをブロックする方法

Question

私は反応する反応Webアプリケーションを持っています。デバイスの幅が 「しかし、すべてのルートが同じファイル内のようなものを作成されています：

<BrowserRouter> 
<Switch> 
    <Route exact path='/login/' component={Login} /> 
    <Redirect exact from='/' to='/login/' /> 
    <Route exact path='/sample/' component={sample} /> 
</Switch> 

ので、ルートは今よりの寸法のデバイスからアクセス可能である 『X』幅もどのように私はルートを作ることができますデバイスの幅に基づいて、またはデバイスの寸法に基づいて特定のルートをブロックする方法

Answer 1

選択ルーティングの場合、ルートレンダリング機能にチェックを入れることができます。ここでは例です：

class Example extends Component{ 
    constructor(props){ 
     super(props); 

     this.check = this.check.bind(this); 
    } 

    check(){ 
     var w = window, 
     d = document, 
     e = d.documentElement, 
     g = d.getElementsByTagName('body')[0], 
     windowWidth = w.innerWidth || e.clientWidth || g.clientWidth; //window width 

     return windowWidth > 568; //returns true for widths larger than 568 pixels 
    } 

    render(){ 
     return(
      <Router> 
       <Route path='/example' render={() => { 
        if(this.check()) return <Child />; 
        else return <OtherChild />; 
       }}/> 
      </Router> 
     ) 
    } 
}