反应未找到组件总是呈现

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;

This is my route configuration file, where i have listed all routes.

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;

This is my app.js import React, { Component } from 'react'; import { Switch, Router, Route } from 'react-router-dom'; import Header from '../header/header'; import Footer from '../footer/footer'; import history from '../../history'; import RouterConfig from '../../router/browserroute';

class App extends Component {
  render() {
    return (
      <div>
        <Router history={ history } >
          <div>
            <Header />
            <Switch>
              <RouterConfig />
            </Switch>
            <Footer />
          </div>
        </Router>
      </div>
    );
  }
}

export default App;

issue is on every page i am getting not found component render. Even using switch with routes not getting the expected results. not sure why code is not working properly.

[this is how it renders not found in every page ][1]

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

on changing:

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 或更低版本，它不支持在渲染中返回数组。你需要把你的东西包在一个容器里。

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;

注意 div 包裹了 Routes 数组

Answer 2

您需要将 Switch 移动到 RouteConfig 内。在 React Router 中，React 16 partials 的工作方式一定有一些出乎意料的地方（我不太确定为什么当 Switch 在 RouterConfig 之外时它不起作用）。好消息是，至少对我来说，在 RouteConfig 中是有意义的。

这是一个有效的codesandbox：

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

反应未找到组件总是呈现

react not found component always renders

javascript

reactjs

react-router

react-router-v4

react-router-dom