Reactjs 我的html未呈现，但路径在react中更改

App.js

Coach.js

import React from 'react';

const Home = React.lazy(() => import('views/Home'));
const SignIn = React.lazy(() => import('views/SignIn'));
const SignUp = React.lazy(() => import('views/SignUp'));
const Workouts = React.lazy(() => import('views/Workouts'));
const WorkoutPlans = React.lazy(() => import('views/WorkoutPlans'));
const Topics = React.lazy(() => import('views/Topics'));
const Mom = React.lazy(() => import('views/Mom')); 
const Coaches = React.lazy(() => import('views/Coaches')); 
const CoachProfile = React.lazy(() => import('views/CoachProfile')); 
const Pricing = React.lazy(() => import('views/Pricing')); 

var indexRoutes = [
{ path: "/coachprofile", name: "CoachProfile", component: CoachProfile },
{ path: "/coaches", name: "Coaches", component: Coaches },
{ path: "/mom", name: "Mom", component: Mom },
{ path: "/topics", name: "Topics", component: Topics },
{ path: "/browse", name: "WorkoutPlans", component: WorkoutPlans },
{ path: "/workouts", name: "Workouts", component: Workouts },
{ path: "/signup", name: "SignUp", component: SignUp },
{ path: "/signin", name: "SignIn", component: SignIn },
{ path: "/", name: "Home", component: Home },
];

export default indexRoutes;

从“React”导入React
从“utils/loadScriptsForHomePage”导入{loadHomeScript}；
类扩展React.Component{
componentDidMount（）{
document.getElementsByTagName（'body'）[0].id='workout\u plan\u authors\u index'；
loadhomescript（）；
}
render（）{
返回(
教练页面
)
}
}
导出缺省coach；

这里我使用的是带有reactjs的路由器

我有一个名为coach.js的组件

我已向教练添加

当我在我的网站上点击Coach链接时，我的url正在改变 从“到”，但html是 不更改它将显示相同的家庭数据

但是，当我在中重新编辑页面时， 它正在呈现html

---

请看一看。

为什么既有

浏览器路由器

又有

路由器

？固定bro。感谢{export const with router（coach）}并从react router dom导入它

import React from 'react';

const Home = React.lazy(() => import('views/Home'));
const SignIn = React.lazy(() => import('views/SignIn'));
const SignUp = React.lazy(() => import('views/SignUp'));
const Workouts = React.lazy(() => import('views/Workouts'));
const WorkoutPlans = React.lazy(() => import('views/WorkoutPlans'));
const Topics = React.lazy(() => import('views/Topics'));
const Mom = React.lazy(() => import('views/Mom')); 
const Coaches = React.lazy(() => import('views/Coaches')); 
const CoachProfile = React.lazy(() => import('views/CoachProfile')); 
const Pricing = React.lazy(() => import('views/Pricing')); 

var indexRoutes = [
{ path: "/coachprofile", name: "CoachProfile", component: CoachProfile },
{ path: "/coaches", name: "Coaches", component: Coaches },
{ path: "/mom", name: "Mom", component: Mom },
{ path: "/topics", name: "Topics", component: Topics },
{ path: "/browse", name: "WorkoutPlans", component: WorkoutPlans },
{ path: "/workouts", name: "Workouts", component: Workouts },
{ path: "/signup", name: "SignUp", component: SignUp },
{ path: "/signin", name: "SignIn", component: SignIn },
{ path: "/", name: "Home", component: Home },
];

export default indexRoutes;

import React from 'react'
import { loadHomeScripts } from 'utils/loadScriptsForHomePage';


class Coaches extends React.Component{

componentDidMount(){
    document.getElementsByTagName('body')[0].id = 'workout_plan_authors_index';
    loadHomeScripts();
}


    render(){
        return (
            <h1>coaches page</h1>

        )
    }
}

export default Coaches;