React Router v4在文件分离时不呈现任何东西

Question

我已经能够获得这个工作与单个文件，但移动路由到route.js导致组件不被渲染。显然我错过了一些东西。我已经看过很多教程，但他们似乎都被用于做出反应路由器< 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> 
) 

我试图实际上有底线route.js结构如下但我得到一个错误

相邻JSX元素必须在一个封闭的标签如果我改变了包裹

期望route.js

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

，让我拥有这一切在index.js如下所示，一切按预期工作。

工作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); 
    }); 
} 

要获得太长我还没有开始贴上我的组件的代码保存的问题。如果这有帮助，请在评论中告诉我。

如果它也有所作为，我使用ExpressJS，Webpack和React Hot Loader。

Answer 1

虽然已经导入routes你有没有在你的组件中使用他们

使用

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

和你routes.js文件将

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

可以在route.js使用开关导出单个元素。交换机确保只有一个路由组件正在呈现。

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

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