Question

我已经能够使用单个文件，但将路由移动到 route.js 会导致组件无法呈现。显然我错过了一些东西。我看了很多教程，但它们似乎都适用于React Router＆lt; 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中的开关导出单个元素。 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不呈现任何内容

2 个答案: