React Router v4 verhindert die Ausführung der übergeordneten Routenkomponente

Question

Ich baue eine Artikelsuche mit React [15.6.1] und Router [4.1.1] und merkte, dass beim Versuch, direkt auf einen Artikel zuzugreifen, auch die vorherige Komponente geladen wird du ihn nicht derjenige ist, der

// === Layout ================== 
class Layout extends React.Component { 

    render() { 
     return (
      <Provider store={this.props.store}> 
       <HashRouter> 
        <div> 
         <Switch> 
          <Route exact path="/" component={SearchFilter} /> 
          <Route path="/article/:guid" component={Article} /> 
         </Switch> 
        </div> 
       </HashRouter> 
      </Provider> 
     ); 
    } 

} 

// === SearchFilter ================== 
class SearchFilter extends React.Component { 

    componentDidMount() { 
     console.log('SearchFilter Did Mount'); 
    } 

    render() { 
     return (
      <div>...</div> 
     ); 
    } 

} 

// === Article ================== 
class Article extends React.Component { 

    componentDidMount() { 
     console.log('Article Did Mount'); 
    } 

    render() { 
     return (
      <div>...</div> 
     ); 
    } 

} 

So genannt wird, wenn an die Wurzel gehen localhost: 3000/#/ druckt

// SearchFilter Did Mount 

Und wenn ich einen Artikel direkt zugreifen wie diese localhost: 3000/#/a Artikel/123456 druckt

// SearchFilter Did Mount 
// Article Did Mount 

Also meine Frage ist, wie kann ich es aus läuft die bisherige Route verhindern? Da möchte ich einige Aktionen dorthin versenden, die einige Ajax-Aufrufe an den Webservice auslösen würden.

Dank

Answer 1

Versuchen Sie stattdessen:

<HashRouter basename="/"> 
    <div> 
     <Switch> 
      <Route exact path="/search" component={SearchFilter} /> 
      <Route path="/article/:guid" component={Article} /> 
     </Switch> 
    </div> 
</HashRouter> 

Answer 2

Edit:

Für mich seine gut funktioniert ... So sagte wie ... es ist etwas wirklich seltsam ist und versteckte passiert auf Ihrem Rechner, oder Sie einfach/URL url nach/#/article/123 und es bewirkt, dass das erste Protokoll bleibt in der Konsole, aber seine von der Previ sous url "/" und wenn Sie den Browser per F5 auf die neue URL/#/article/123 neu laden, sehen Sie nur den "Artikel hat mounten"