react-router-dom auf dem Server

Question

Ich habe herausgefunden, dass ich nicht verwenden kann, wenn ich meine App auf dem Server rendern. Ich möchte meine App je nach Situation in einen bestimmten Router einbinden - BrowserRouter auf der CLient-Seite und StaticRouter auf der Serverseite. Meine App sieht wie folgt aus:

imports...... 
class App extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
    } 
    } 

    render() { 
     return (
     <BrowserRouter> 
      <div> 
      <Menu /> 
      <main> 
       <Switch> 
       <Route exact path="/about" component = {About} /> 
       <Route exact path="/admin" component = {BooksForm} /> 
       <Route exact path="/cart" component = {Cart} /> 
       <Route exact path="/" component = {BookList} /> 
       </Switch> 
       <Footer /> 
      </main> 
      </div> 
     </BrowserRouter> 
    ); 

    } 

    componentDidMount(){ 
    this.props.getCart(); 
    } 
} 

function mapDispatchToProps(dispatch) { 
    return bindActionCreators({ 
    getCart 
    }, dispatch) 
} 

export default connect(null, mapDispatchToProps)(App); 

Ich versuchte, meine BrowserRouter ou dieser Komponente zu bewegen, so meine index.js würde wie folgt aussehen:

imports.... 
const renderApp =() => (
    <Provider store={createStoreWithMiddleware(reducers)}> 
    <BrowserRouter> 
     <App/> 
    </BrowserRouter> 
    </Provider> 
) 

const root = document.getElementById('app') 
render(renderApp(), root) 

So würde ich meine Fähigkeit App umwickeln verschiedene Router. Das Problem ist, wenn ich BrowserRouter aus meiner App-Komponente verschoben habe funktioniert es nicht mehr. Klicken auf Links funktioniert einfach nicht mehr. Die URL ändert sich, aber meine App zeigt keine verschiedenen Komponenten an. Wie kann ich Router aus dieser Komponente entfernen?

Answer 1

Auf dem Server werden Sie Ihre App ähnlich wie diese wickeln: (aus der URL) sowie ein Kontextobjekt

const routerContext = {}; 

const appComponent = (
    <Provider store={store}> 
     <StaticRouter location={req.url} context={routerContext}> 
     <App /> 
     </StaticRouter> 
    </Provider> 
); 

Wo Sie die Lage reagieren-Router passieren.

Die Client-Seite ist wie Ihr Beispiel:

<Provider store={createStoreWithMiddleware(reducers)}> 
    <BrowserRouter> 
    <App/> 
    </BrowserRouter> 
</Provider>