Блог

Я использую React с react-router-dom, и я хочу разделить свои маршруты на разные файлы для более чистого кода. Допустим, у меня есть SettingsRoutes.js и ChatRoutes.js . Каждый из них содержит соответствующие маршруты, такие как: Settings.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`, Component: Inbox, 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 , но не совсем уверен, в чем проблема.
Спасибо вам за помощь.