React Router 4 funktioniert nur im Hauptmodul

Question

Ich habe Schwierigkeiten mit reactive Route 4, versuchen zu erraten, warum es nur im Hauptmodul funktioniert.

Mein Code:

import React from 'react' 
import ReactDOM from 'react-dom' 
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom' 
import Enterprise from './containers/Enterprise' 
import Provider from './containers/Provider' 
import Home from './containers/Home' 

let render =() => { 

    ReactDOM.render(
    <Router> 
     <div> 
     <Switch> 
      <Route exact path="/" component={Home}/> 
      <Route exact path="/enterprises" component={Enterprise} > 
      <Route exact path="/providers" component={Provider} /> 
     </Switch>       
     </div> 
    </Router>, 
    document.getElementById('root') 
) 
} 

render() 

Dies wird so bald aufhören zu arbeiten, als ich die Routen innerhalb AppContainer (leben in einer separaten Datei) erklären. Wie:

AppContainer.js

imports... 

class AppContainer extends Component { 

    shouldComponentUpdate() { 
    return false 
    } 

    render() { 

    return (
     <Header /> 

     <Sidebar /> 

     <main> 
      <Switch> 
      <Route exact path="/" component={Home}/> 
      <Route exact path="/enterprises" component={Enterprise} > 
      <Route exact path="/providers" component={Provider} /> 
      </Switch> 
     </main> 

     <Footer /> 
    ) 
    } 
} 

export default AppContainer 

main.js

imports... 

let render =() => { 

    ReactDOM.render(
    <Router> 
     <AppContainer />   
    </Router>, 
    document.getElementById('root') 
) 
} 

Ich verwende webpack Module, aber nicht so mit dem Code Splitting ... Ich bin verwirrt. Ich habe im Internet nach Beispielen gesucht, die in getrennten Modulen funktionieren (auch wenn der Quellcode in einer einzigen Datei angezeigt wird).

Irgendwelche Hinweise?

Answer 1

Scheint wie das Problem war sollteComponentUpdate(). Ich benutze jetzt eine Konstante und es funktioniert.

AppContainer.js

Importe ...

const AppContainer =() => (

     <div className="page-wrapper"> 

      <Header /> 

      <div className="page-container"> 

       <Sidebar /> 

       <main>   
        <Switch>   
        <Route exact path="/" component={Home} /> 
        <Route exact path="/enterprises" component={Enterprise} > 
        <Route exact path="/providers" component={Provider} />   
        </Switch> 
       </main>            
      </div> 

      <Footer /> 

     </div> 
) 

(btw, dass Block geht tatsächlich in einer anderen Datei Komponente namens Seite. Ich bin Vereinfachung nur hier meinen Code)