Why does Router not show data from database when using Reactjs, but work without Router?

When using Router in react its not showing data from database but without Router its working
But when router with defined function in routes.js its not showing data from server side

App.js

import React, {Component} from 'react';
import { BrowserRouter as Router} from 'react-router-dom';
import BaseRouter from './routes';


import 'antd/dist/reset.css';

import CustomLayout from './container/layout';
// import ArticleList from './container/ariclelistview';


//not working
class App extends Component{
  render(){
    return(
         <div className='App'>
          <Router>
            <CustomLayout>
              <BaseRouter/>
           
            </CustomLayout>
          </Router>

         </div>
    );
  }
}

// working
// class App extends Component{
//   render(){
//     return(
//          <div className='App'>
          
//             <CustomLayout>
//               <ArticleList/>
           
//             </CustomLayout>
          

//          </div>
//     );
//   }
// }

export default App;

routes.js

import React from "react";
import ArticleList from './container/ariclelistview';
import { Route } from  'react-router-dom';

const BaseRouter = () => {
    <div>
        <Route exact path ='/' Component={ArticleList} />
        <Route exact path ='/:articleID' Component={ArticleList} />
    </div>
};
export default BaseRouter;

ArticleList.js

import React from "react";
import Articles from "../components/articles";
import axios from 'axios';


const data = Array.from({
    length: 23,
  }).map((_, i) => ({
    href: 'https://ant.design',
    title: `ant design part ${i}`,
    avatar: `https://xsgames.co/randomusers/avatar.php?g=pixel&key=${i}`,
    description:
      'Ant Design, a design language for background applications, is refined by Ant UED Team.',
    content:
      'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
  }));

class ArticleList extends  React.Component{

    state={
        articles:[]
    }
    componentDidMount(){
      axios.get('http://127.0.0.1:8000/api/')
      .then(res =>{
        this.setState({
            articles:res.data
        });
        console.log(res.data)
       
      })

    }
    render(){
        return(
            <Articles data={this.state.articles}/>

        )
    }
}
export default ArticleList;

its fetching from server when use <ArticleList/> component

But when router <Router> with defined <BaseRouter> function in routes.js its not showing data from server side

And there’s no error showing in console
Please anyone with solutions.