问题描述
我将 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
做一些事情,但不确定是什么问题。
谢谢你的帮助。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)