当文件分开时，React Router v4 不渲染任何东西

IT技术 reactjs react-router react-router-v4
2021-05-01 08:58:14

我已经能够让它与单个文件一起工作，但是将路由移动到route.js 会导致组件不被渲染。显然我错过了一些东西。我看过很多教程，但它们似乎都适用于 React Router < v4.0

索引.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);
  });
}

路由.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。

2个回答

尽管您已导入，但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>
)

您可以使用 switch inroute.js导出单个元素。Switch 确保只渲染一个 Route 组件。

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

export default (
   <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/login" component={Login} />
   </Switch>
)
其它你可能感兴趣的问题
上一篇每个 的 es6 箭头函数中的花括号 下一篇未找到页面 React Router V4