Rect Js роутер останавливается при импорте маршрутов из внешнего файла

Question

я работаю по реагирующему маршрутизатору js (Reaction-router-dom v4.2) и Redux вместе и у меня странная проблема с переменными

сначала я говорю, что успешно использовал и запустил это, нопроблемы

1. , когда я использую корневой маршрут в качестве первого поворота в списке маршрутов, маршрутизатор перестает работать !!

, но когдая использую маршрут '/' как последний маршрут, все в порядке

<Switch>
  <Route path="/blog" component={Blog} />
  <Route path="/users/" component={Users} />
  <Route path="/" component={Home} axact />
</Switch>

когда я создаю маршруты как внешний компонент и импортирую их в приложение, маршруты не работают

это мои коды route.js

import React, { Component } from 'react';
import { Switch, Route } from "react-router-dom";
// import Components
import Home from './components/Home'
import Blog from './components/blog/Blog'
import Users from './components/users/Users'

class router extends Component {
    render() {
        return (
            <div>
                <Switch>
                    <Route path="/" component={Home} axact />
                    <Route path="/blog" component={Blog} />
                    <Route path="/users/" component={Users} />
                </Switch>
            </div>
        );
    }
}

export default router;

это мои коды App.js:

import React, { Component } from 'react';
import { getUsers } from './store/actions'
import { connect } from 'react-redux'

import { withRouter } from "react-router-dom";
import Nav from './components/navigation/Nav';
import axios from 'axios';

const userApi = "https://jsonplaceholder.typicode.com/users"

class App extends Component {

    componentWillMount() {
        axios.get(userApi)
            .then(response => {
                let users = response.data
                this.props.getUserList(users)
            })
            .catch(error => {
                console.log(error)
            })
    }

    render() {
        return (
            <div className="container">
                <Nav />
                <Router />
            </div>
        );
    }
}

const mapDispatchToProps = dispatch => ({ getUserList: (api) => dispatch(getUsers(api)) })

export default withRouter(connect(null, mapDispatchToProps)(App));

когда я использую эти коды, все в порядке

import React, { Component } from 'react';
import { getUsers } from './store/actions'
import { connect } from 'react-redux'

import { Switch, Route, withRouter } from "react-router-dom";

import Home from './components/Home'
import Blog from './components/blog/Blog'
import Users from './components/users/Users'
import Nav from './components/navigation/Nav';

import axios from 'axios';

const userApi = "https://jsonplaceholder.typicode.com/users"

class App extends Component {

  componentWillMount() {
    axios.get(userApi)
      .then(response => {
        let users = response.data
        this.props.getUserList(users)
      })
      .catch(error => {
        console.log(error)
      })
  }

  render() {
    return (
      <div className="container">
        <Nav />

        <Switch>
          <Route path="/blog" component={Blog} />
          <Route path="/users/" component={Users} />
          <Route path="/" component={Home} axact />
        </Switch>
      </div>
    );
  }
}

const mapDispatchToProps = dispatch => ({ getUserList: (api) => dispatch(getUsers(api)) })

export default withRouter(connect(null, mapDispatchToProps)(App));