useRoutes的原理,就是把对象以树的形式进行存放,同时提取URL,来匹配渲染对应的组件
const Routing = () => useRoutes({});
return (
<BrowserRouter>
<Routes>
<Route>
</Route>
<Routes />
</BrowserRouter>
);
//useRoutes的原理,就是把对象以树的形式进行存放,同时提取URL,来匹配渲染对应的组件
const useRoutes=(routes)=>{
let location=useLocation()
let currentPath=location.pathname ||'/'
for(let i=0;i<routes.length;i++){
let {pathname,element}=routes[i]
let match=currentPath.match(new RegExp(`^${pathname}`))
if(match){
return element
}
}
}
const createRoutesFromChildren=(children)=>{
let routes=[]
React.Children.forEach(children,(node)=>{
let route={
path:node.props.path,
element:node.props.element
}
if(node.props.children){
route.children=createRoutesFromChildren(node.props.children)
}
})
return routes
}
const Routes=({children})=useRoutes(createRoutesFromChildren(children))