React Router v4 nichts rendern, wenn Dateien getrennt

Question

Ich konnte dies mit einer einzigen Datei arbeiten, aber das Verschieben von Routen zu einem route.js führt dazu, dass die Komponente nicht gerendert wird. Offensichtlich vermisse ich etwas. Ich habe bei einer Menge Tutorials aussah, aber sie scheint alles für Router < v4.0

index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { 
    BrowserRouter as Router, 
    Link, 
    Route 
} from 'react-router-dom'; 

import { AppContainer } from 'react-hot-loader'; 

import routes from './routes.js'; 

ReactDOM.render(
    <Router> 
    <div> 
     <Link to="/">/</Link><br /> 
     <Link to="/login">Login</Link><br /> 
    </div> 
    </Router>, 
    document.getElementById('root'), 
); 

// Hot Module Replacement API 
if (module.hot) { 
    module.hot.accept('./Home/Home',() => { 
    render(Home); 
    }); 
} 

routes.js

import React from 'react'; 
import { 
    BrowserRouter as Router, 
    Route 
} from 'react-router-dom'; 
import ReactDOM from 'react-dom'; 

import Home from './Home/Home'; 
import Login from './Login/Login'; 


export default (
    <Route path="/" component={Home}> 
    <Route path="/login" component={Login} /> 
    </Route> 
) 

ich reagieren werden habe versucht, tatsächlich die Unterseite von route.js strukturiert wie unten zu haben, aber ich bekomme einen Fehler

Angrenzend JSX Elemente müssen in einem umschließenden Tag

Wunsch route.js

export default (
    <Route exact path="/" component={Home} /> 
    <Route path="/login" component={Login} /> 
) 

gewickelt werden, wenn ich dies ändern, so dass ich alles in index.js haben Wie unten funktioniert alles wie erwartet.

Arbeiten index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { 
    BrowserRouter as Router, 
    Link, 
    Route 
} from 'react-router-dom'; 

import { AppContainer } from 'react-hot-loader'; 

import Home from './Home/Home'; 
import Login from './Login/Login'; 

ReactDOM.render(
    <Router> 
    <div> 
     <Link to="/">/</Link><br /> 
     <Link to="/login">Login</Link><br /> 

     <Route exact path="/" component={Home} /> 
     <Route path="/login" component={Login} /> 
    </div> 
    </Router>, 
    document.getElementById('root'), 
); 

// Hot Module Replacement API 
if (module.hot) { 
    module.hot.accept('./Home/Home',() => { 
    render(Home); 
    }); 
} 

Um die Frage zu speichern zu lange immer habe ich nicht von Anfang an meinen Komponentencode eingefügt. Wenn das hilfreich ist, lass es mich in den Kommentaren wissen.

Wenn es auch einen Unterschied macht, verwende ich ExpressJS, Webpack und React Hot Loader.

Answer 1

Obwohl Sie importiert haben routes Sie haben sie nicht in Ihrer Komponente

Verwenden

ReactDOM.render(
    <Router> 
    <div> 
     <Link to="/">/</Link><br /> 
     <Link to="/login">Login</Link><br /> 
    </div> 
    {routes} 
    </Router>, 
    document.getElementById('root'), 
); 

und Ihre routes.js Datei

import React from 'react'; 
import { 
    BrowserRouter as Router, 
    Switch 
    Route 
} from 'react-router-dom'; 
import ReactDOM from 'react-dom'; 

import Home from './Home/Home'; 
import Login from './Login/Login'; 


export default (
    <Switch> 
    <Route exact path="/" component={Home} /> 
    <Route path="/login" component={Login} /> 
    </Switch> 
) 

Answer 2

Sie können in route.js verwenden Schalter früher um ein einzelnes Element zu exportieren. Der Schalter stellt sicher, dass nur eine Route-Komponente gerendert wird.

import { Switch } from 'react-router-dom' 

export default (
    <Switch> 
     <Route exact path="/" component={Home} /> 
     <Route path="/login" component={Login} /> 
    </Switch> 
)