react not found component always renders

Question

This is code for looping through routes file. Here i am creating routerconfig array an exporting from here to 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>
    );
  }
}

This works fine

Answer 1

You need to move Switch to be inside RouteConfig. There must be something with the way React 16 partials work that is unexpected in React Router (I'm not really sure why it does not work when Switch is outside RouterConfig). The good news is, at least for me, it makes sense to be inside RouteConfig.

Here is a codesandbox that works:

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

Answer 2

Which version of React are you using? If you are using React 15 or lower, it does not support returning an array inside render. You would need to wrap you stuff in a container.

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;

Notice the div wrapping the Routes array