反应未找到组件始终呈现

Question

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

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 进口反应，{元器件}从 '反应'; import'Switch，Router，Route} from'react-router-dom'; 从'../header/header'导入标题; 从'../footer/footer'中导入页脚; 从'../../history'导入历史记录; 从'../../router/browserroute'导入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

你需要移动Switch在里面RouteConfig。必须有React 16 partials在React Router中出现的意外情况（我不太确定为什么当Switch在RouterConfig之外时它不工作）。好消息是，至少对我来说，在RouteConfig内部是有道理的。

这是一个可行的codesandbox：

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

Answer 2

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

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; 

公告股利包裹路线阵列