在反应路由器中分离路由

如何解决在反应路由器中分离路由

我将 React 与 react-router-dom 一起使用，我想要的是将我的路由分成不同的文件 为了更干净的代码。 假设我有 SettingsRoutes.js 和 ChatRoutes.js。每个包含相关路线，如下所示： 设置.js

const SettingsRoutes = () => {
    const routes = [
        { path: '/help-center',Component: HelpCenter },{ path: '/contact-us',Component: ContactUs },{ path: '/terms',Component: TermsOfService },{ path: '/guidelines',Component: CommunityGuidelines },{ path: '/policy',Component: PrivacyPolicy },{ path: '/account',Component: Account },{ path: '/notifications',Component: Notifications },{ path: '/report',Component: Report },{ path: '/settings',Component: Settings },]

    return (
        <>
            {routes.map(({ path,Component }) => (
                <Route path={path} exact render={props => <Component {...props} />} />
            ))}
        </>
    )
}

export default SettingsRoutes

Chat.js

import React from 'react'
import { Route,Switch } from 'react-router'
import InBox from '../container/allChat'
import Chat from '../container/allChat/inBox/Chat'

const ChatRoutes = ({ socket,matches }) => {
    const BASE_URL = '/chat'
    const baseProps = { socket }
    const routes = [
        { path: `${BASE_URL}`,Component: InBox,ownProps: baseProps },{
            path: `${BASE_URL}/rooms/:roomId/:name/:roomOwnerId`,Component: matches ? InBox : Chat,ownProps: baseProps
        },{ path: `${BASE_URL}/rooms/:mid`,ownProps: baseProps }
    ]
    return (
        <>
            {routes.map(({ path,Component,ownProps }) => (
                <Route
                    path={path}
                    exact
                    render={props => <Component {...props} {...ownProps} />}
                />
            ))}
        </>
    )
}

export default ChatRoutes

index.js（路由）

    <Switch>
            <ChatRoutes {...chatProps} />
            <SettingsRoutes/>   
        </Switch>
    )

现在由于某种原因只渲染了 ChatRoutes.js 而不是 Settings.js 我认为它必须对 Switch 做一些事情，但不确定是什么问题。 谢谢你的帮助。