React使用Router时无法获取数据库数据，无Router则正常

核心问题及修复步骤 #

1. BaseRouter组件未返回JSX #

你的BaseRouter是箭头函数形式，但内部的JSX代码没有被返回，导致路由规则根本没有被渲染出来。

修改后的routes.js代码：

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

// 用圆括号包裹JSX，实现自动返回
const BaseRouter = () => (
    <div>
        <Route exact path='/' component={ArticleList} />
        <Route exact path='/:articleID' component={ArticleList} />
    </div>
);
export default BaseRouter;

或者也可以显式添加return语句：

const BaseRouter = () => {
    return (
        <div>
            <Route exact path='/' component={ArticleList} />
            <Route exact path='/:articleID' component={ArticleList} />
        </div>
    );
};

2. Route组件的属性名拼写错误 #

你在Route中使用了Component={ArticleList}，但react-router-dom的Route组件接收的是**小写的component**属性。大写的Component会被当作普通自定义props传递，不会触发组件的实例化，因此ArticleList的componentDidMount生命周期函数根本不会执行，自然无法发起数据请求。

只需把所有Component改成小写的component即可。

修复后验证 #

修改完成后，当路由匹配对应路径时，ArticleList组件会正常挂载，componentDidMount中的axios请求会执行，服务器数据会被获取并更新到组件状态，页面就能正常展示数据了。

内容的提问来源于stack exchange，提问作者M Junaid