Reactjs 为什么每个/admin/。。。显示相同的内容？

下面是一些代码，问题是它只显示第一个标记中的内容，因此admin/defectReports或viewAdmins将只显示admin/viewCleaners中的信息。如何使不同的URL显示不同的内容

index.js

const DefectReports = lazy(() => import('./components/dashboard/DefectReports'));
const ViewCleaners = lazy(() => import('./components/dashboard/ViewCleaners')); 
const ViewAdmins = lazy(() => import('./components/dashboard/ViewAdmins')); 
...
<Route exact path={localPath.viewCleaners} component={ViewCleaners} /> 
<Route exact path={localPath.defectReports} component={DefectReports} />
<Route exact path={localPath.viewAdmins} component={ViewAdmins} />

ViewCleaners.js 我试图简化代码，使其更容易理解，请原谅任何语法错误

export class viewCleaners extends Component {

    state = {
        person: [],
        columns: [{
            dataField: 'Name',
            text: 'Name',
            sort: true
        }, {
            dataField: 'Rating',
            text: 'Rating',
            sort: true
        }]
    }

    componentDidMount() {
        this.setState({
            person: [{ 
                Name: 'Becky Ann',
                Rating: 4.99
                }]
        });
    }

    render() {
        return (
            <div className="container" >
                <Row>
                    <Col xs={2} id="sidebar-wrapper">
                        <SideBar />
                    </Col>
                    <Col>
                        <div style={{ marginTop: 30 }}>
                            <ToolkitProvider
                                keyField="Name"
                                data={this.state.person}
                                columns={this.state.columns}
                                search>
                                {
                                    props => (
                                        <div>
                                            <SearchBar {...props.searchProps} />
                                            <hr />
                                            <BootstrapTable
                                                striped
                                                hover
                                                pagination={paginationFactory()}
                                                {...props.baseProps}
                                            />
                                        </div>
                                    )
                                }
                            </ToolkitProvider>
                        </div>
                    </Col>
                </Row>
            </div>
        )
    }
}
export default viewCleaners

导出类viewCleaners扩展组件{
状态={
人员：[]，
栏目：[{
数据字段：“名称”，
文本：“名称”，
排序：正确
}, {
数据字段：“评级”，
文本：“评级”，
排序：正确
}]
}
componentDidMount（）{
这是我的国家({
人：[{
姓名：“贝基·安”，
评级：4.99
}]
});
}
render（）{
返回(
{
道具=>(

)
}
)
}
}
导出默认视图清理器

从以下位置更改路径：

致：

---

从以下位置更改路径：

致：

---

您的config.js的本地路径为

defectReportsPage

，

ViewCleanerPage

，

viewAdminsPage

，而index.js的本地路径为

localPath.viewCleaners

，

localPath.defectReports

，

localPath.viewAdmins

。这是打字错误还是错误？这就是错误！谢谢：）如果我的上述评论帮助您解决了问题，那么请接受我在下面发布的回答。您的config.js的localPath为

defectReportsPage

，

ViewCleanerPage

，

viewAdminsPage

，而index.js的localPath.viewCleaners，

localPath.defectReports

，

localPath.viewAdmins

。这是打字错误还是错误？这就是错误！谢谢：）如果我的上述评论有助于解决您的问题，请接受我在下面发布的答案

export class viewCleaners extends Component {

    state = {
        person: [],
        columns: [{
            dataField: 'Name',
            text: 'Name',
            sort: true
        }, {
            dataField: 'Rating',
            text: 'Rating',
            sort: true
        }]
    }

    componentDidMount() {
        this.setState({
            person: [{ 
                Name: 'Becky Ann',
                Rating: 4.99
                }]
        });
    }

    render() {
        return (
            <div className="container" >
                <Row>
                    <Col xs={2} id="sidebar-wrapper">
                        <SideBar />
                    </Col>
                    <Col>
                        <div style={{ marginTop: 30 }}>
                            <ToolkitProvider
                                keyField="Name"
                                data={this.state.person}
                                columns={this.state.columns}
                                search>
                                {
                                    props => (
                                        <div>
                                            <SearchBar {...props.searchProps} />
                                            <hr />
                                            <BootstrapTable
                                                striped
                                                hover
                                                pagination={paginationFactory()}
                                                {...props.baseProps}
                                            />
                                        </div>
                                    )
                                }
                            </ToolkitProvider>
                        </div>
                    </Col>
                </Row>
            </div>
        )
    }
}
export default viewCleaners