react路由无法跳转到预期页面

import React from 'react';
// import routes from './router/router'
// import logo from './logo.svg';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import './App.css';
import Login from './components/login/index'
import Welcome from './components/welcome/index'
let routes = [
  {
    path: '/login',
    exact: true,
    component: Login
  },
  {
    path: '/welcome',
    component: Welcome
  }
]
class App extends React.Component{
  render (){
    return (
      <Router>
        <div>       
          <Link to="/welcome">欢迎</Link>
          <Link to="/login">登录</Link>
              <div>
                {

                  routes.map((item,index)=>{
                  if(item.exact===true){
                    return (
                      <Route exact path={item.path} component={item.component} key={index} ></Route>
                    )
                  } else {
                    return (
                      <Route path={item.path} component={item.component} key={index} ></Route>
                      )
                  }
                })
                }
              </div>
        </div>
      </Router>
    )
  }
}
export default App;

以上方式直接把路由数组写在需要配置的组件内,能够正常跳转
换成import引入这个路由数组的形式就失效了

import login from '../components/login/index'
import welcome from '../components/login/index'


let routes = [
    {
        path: '/login',
        exact: true,
        component: login
    },
    {
        path: '/welcome',
        component: welcome
    }
]

export default routes