文件分离时 React Router v4 不呈现任何内容

Question

我已经能够让它与单个文件一起工作，但是将路由移动到 route.js 会导致组件无法呈现。显然我错过了一些东西。我看过很多教程，但它们似乎都是针对 React 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>
)

我试图将 route.js 的底部构造如下，但出现错误

Adjacent JSX elements must be wrapped in an enclosing tag

想要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中使用开关来导出单个元素。 Switch 确保只渲染一个 Route 组件。

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

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

文件分离时 React Router v4 不呈现任何内容

React Router v4 not rendering anything when files separated

reactjs

react-router

react-router-v4