React路由Route？

Posted 2023-04-15

import BrowserRouter as Router, Route, Link from 'react-router-dom';const First = () => <p>页面一的内容</p>// 使用Router组件包裹整个应用const App = () => ( <Router> <div> <h1>React路由基础</h1> /* 指定路由入口 */ <Link to="/first">页面一</Link> /* 指定路由出口 */ <Route path="/first" component=First></Route> </div> </Router>)ReactDOM.render(<App />, document.getElementById('root'))

<Route> 组件是 React Router 中最重要的组件了,如果当前的位置与路由的路径匹配,就会渲染对应的 UI.理想情况下,<Route> 组件应该有一个名为 path 的属性 参考技术A React-router5.x 路由的使用及配置 在React router 中通常使用的组件有三种: 路由组件(作为根组件): BrowserRouter(history模式) 和 HashRouter(hash模式) 路径.. 参考技术B 一般情况下的话，我觉得如果说是出现了这种情况下的话，建议大家可以直接就重新再启动一下就可以了，非常方便的一款

React Router - 使用 404 错误页面映射路由

【中文标题】React Router - 使用 404 错误页面映射路由

【英文标题】：React Router - Mapping routes with 404 error page

【发布时间】：2020-06-21 21:08:14

【问题描述】：

我目前正在使用 React 路由器。与<Switch> 选项相反，我更喜欢路由配置文件的语法和映射路由数组以呈现路由。

routes.map(route => 
        return (
          <PrivateRoute
            key=route.path
            path=route.path
            exact
            component=route.component
          />
        );
      )

上述用例有没有办法为所有非精确匹配的路由设置一个 404 组件。

我见过像这样的<Switch> 方法：https://reacttraining.com/react-router/web/example/no-match。如前所述，我更喜欢在路由配置文件中声明所有路由，包括路径、组件和面包屑名称。如果我沿着 Switch 路线走，那么路线配置仅用于面包屑并且变得不那么有用

【参考方案1】：

如果你要在配置文件中定义你的路由，那么你应该使用react-router-config（它也是 react-router 的一部分）

如果你看一下renderRoutes 的实现，你会注意到它在内部使用了一个Switch 组件，这意味着你可以将你的“404”路由放在列表的末尾，它应该如果没有其他匹配项，则回退到该匹配项，例如：

const routes = [
  
    component: Root,
    routes: [
      
        path: "/",
        exact: true,
        component: Home
      ,
      
        path: "/child/:id",
        component: Child,
        routes: [
          
            path: "/child/:id/grand-child",
            component: GrandChild
          
        ]
      ,
      
        path: "*",
        component: NotFound,
      ,
    ]
  
]

你也可以像RedirectToNotFound这样实现一个组件：

const RedirectToNotFound = () => <Redirect to="/404" />;

然后像这样设置你的配置文件：

const routes = [
  
    component: Root,
    routes: [
      
        path: "/",
        exact: true,
        component: Home
      ,
      
        path: "/child/:id",
        component: Child,
        routes: [
          
            path: "/child/:id/grand-child",
            component: GrandChild
          
        ]
      ,
      
        path: "/404",
        component: NotFound
      ,
      
        path: "*",
        component: RedirectToNotFound,
      ,
    ]
  
]

完全披露：我从未使用过 react-router-config 和 unless you have a very specific need 我不推荐使用它。