react 在非路由组件中使用路由

在React中，如果要在非路由组件中使用路由功能，通常有两种常见的做法：

1. **嵌套路由** (Nested Routing): 你可以将`<Route>`组件放在一个包裹所有非路由组件的`<Switch>`或`<BrowserRouter>`中。这样，即使是非路由组件，也可以通过`<Route>`捕获并渲染其对应的路由内容。例如：

   <BrowserRouter>
     <Routes>
       {/* 你的其他路由定义 */}
       <Route path="*" element={<NonRouteComponent />} />
     </Routes>
   </BrowserRouter>

这里，`<NonRouteComponent />` 将会在所有未匹配到特定路由的情况下显示。

2. **使用高阶组件(HOC)** 或者 **钩子函数**(HOCs or Hooks-based approach): 通过创建一个自定义的HOC，将路由逻辑封装起来，并将其作为prop传递给非路由组件。比如使用`withRouter` HOC：

   import { withRouter } from 'react-router-dom';

   const EnhancedComponent = withRouter(MyNonRouteComponent);

然后，在非路由组件上使用`EnhancedComponent`即可访问路由信息。

请注意，虽然非路由组件可以间接地利用路由，但是最佳实践还是建议将相关的业务逻辑和呈现分离，保持组件的清晰结构。