Question

这是循环路由文件的代码。在这里我创建routerconfig数组，从这里导出到app.js.

import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import routes from './routes';

class RouterConfig extends Component {
  render() {
    return (
      routes.map((route) => {
        return (
          <Route
            key={ route.id }
            path={ route.path }
            exact={ route.exact }
            component={ route.component }
          />
        );
      })
    );
  }
}
export default RouterConfig;
这是我的路线配置文件，其中列出了所有路线。
import Home from '../components/home/home';
import About from '../components/about/about';
import Posts from '../components/posts/posts';
import NotFound from '../components/not_found/not_found';

const routes = [
  {
    path: '/',
    exact: true,
    component: Home,
    id: 'home',
  },
  {
    path: '/about',
    component: About,
    id: 'about',
  },
  {
    path: '/posts',
    component: Posts,
    id: 'posts',
  },
  {
    component: NotFound,
    id: 'not_found',
  },
];

export default routes;
这是我的app.js. 导入React，{Component}来自＆＃39;反应＆＃39 ;; 从＆＃39; react-router-dom＆＃39;中导入{Switch，Router，Route}; 从＆＃39; ../ header / header＆＃39;中导入标题; 从＆＃39; ../页脚/页脚＆＃39;进口页脚; 从＆＃39; ../../历史记录中导入历史记录＆＃39; 从＆＃39; ../../ router / browserroute＆＃39;;
导入RouterConfig
class App extends Component {
  render() {
    return (
      <div>
        <Router history={ history } >
          <div>
            <Header />
            <Switch>
              <RouterConfig />
            </Switch>
            <Footer />
          </div>
        </Router>
      </div>
    );
  }
}

export default App;
问题是在每个页面上我都找不到组件渲染。甚至   使用具有未获得预期结果的路线的开关。不确定   为什么代码不能正常工作。

[这是它在每个页面中找不到的方式] [1]

[1]：https://i.stack.imgur.com/B7evW.png

关于改变：
class App extends Component {
  render() {
    return (
      <div>
        <Router history={ history } >
          <div>
            <Header />
            <Switch>
              <Route exact path='/' component={ Home } />
              <Route path='/about' component={ About } />
              <Route path='/posts' component={ Posts } />
              <Route component={ NotFound } />
            </Switch>
            <Footer />
          </div>
        </Router>
      </div>
    );
  }
}

这很好用

Answer 1

您使用的是哪个版本的React？如果您使用的是React 15或更低版本，则它不支持在render中返回数组。你需要将你的东西包装在容器中。

import React, { Component } from 'react';
import { Route } from 'react-router-dom';
import routes from './routes';

class RouterConfig extends Component {
  render() {
    return (
      <div>{
      routes.map((route) => {
        return (
          <Route
            key={ route.id }
            path={ route.path }
            exact={ route.exact }
            component={ route.component }
          />
        );
      })
      }</div>
    );
  }
}
export default RouterConfig;

注意包裹Routes数组的div

Answer 2

您需要将Switch移到RouteConfig内。必须有一些React 16部分工作的方式在React Router中是意外的（我不确定为什么当Switch在RouterConfig之外时它不起作用）。好消息是，至少在我看来，进入RouteConfig是有意义的。

这是一个有效的代码框：

https://codesandbox.io/s/8xmx478kq8

反应未找到的组件总是呈现

2 个答案: