react Router这个标签的使用场景是什么呢？

作者站长头像
站长
· 阅读数 5

<Router></Router>我搜索到的这个标签的使用方法是:

Router我们可以把它看做是react路由的一个路由外层盒子，它里面的内容就是我们单页面应用的路由以及路由组件。

import { BrowserRouter as Router } from "react-router-dom";
class Main extends Component{
    render(){
        return(
        <Router>
            <div>
                //otherCoding
            </div>
        </Router>
        )
    }
}

但是我看别的项目没见到使用Router这个标签，也能正常运行

class Main extends Component{
    render(){
        return(
        <Switch>
          <Route path={'/'} exact component={Home} />
          <Route path={'/home'} component={Home} />
          <Route path={'/blog'} component={Blog} />
        </Switch>
        )
    }
}

求解惑，这个Router标签，到底在什么场景下需要外层包裹

回复
1个回答
avatar
test
2024-07-05

在使用 React Router 进行页面路由时，<Router> 组件是进行路由配置的根组件，必须要将路由组件包裹在这个组件之内。在使用 React Router 时，一般会把 <Router> 包裹在应用的入口组件（如 App.js）中，这样整个应用的路由设置才能生效。

在 <Router> 组件内部，可以使用以下三种类型的路由：

  1. <Route> 组件：用于配置具体的路由规则，指定某个路由对应的组件。
  2. <Switch> 组件：用于包裹 <Route> 组件，确保只会匹配一个路由，即当前路由与当前 URL 完全匹配的第一个路由，防止出现多个路由同时匹配到 URL 的情况。
  3. <Link> 组件：用于在点击链接时进行页面跳转，它在页面中显示为一个可点击的超链接。

因此，大多数应用中，我们都需要在应用的入口组件中使用 <Router> 组件来包裹整个应用的路由设置，而在具体的页面或组件中则不需要再使用 <Router> 组件，而是直接使用 <Route>、<Switch> 或 <Link> 组件即可。比如你示例的使用方法代码：

<Switch>
  <Route path={'/'} exact component={Home} />
  <Route path={'/home'} component={Home} />
  <Route path={'/blog'} component={Blog} />
</Switch>

这里并没有使用 <Router> 组件，因为它是在应用的入口组件中使用的，而不是在某个具体的路由组件中使用的。如果没有在入口组件中使用 <Router> 组件进行路由配置，那么路由将无法正常生效。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容