1.React-Router核心组件 V6版本

最新推荐文章于 2023-05-09 20:21:22 发布

原创最新推荐文章于 2023-05-09 20:21:22 发布 · 254 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

React-Router 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了React-Router V6中的核心组件，包括BrowserRouter、HashRouter的使用区别，Link组件的导航功能，以及Routes和Route组件在路由匹配和页面渲染中的作用。通过这些组件，可以有效地管理和实现前端路由。

核心组件–BrowerRouter

作用：包裹整个应用，一个React应用只需要使用一次

两种常用Router： HashRouter和BrowserRouter

HashRouter

使用URL的哈希值实现（http://loacalhost:3000/#/first）

BrowserRouter(推荐)

使用H5的history.pushState API实现（http://loacalhost:3000/first）

const App = () => {

  return (
    <BrowserRouter>
      {/* 点击跳转 */}
      <Link to='/'>首页</Link>
      <Link to='/about'>关于</Link>
      {/* 路由出口位置 路由对应的组件会在这里进行渲染 */}
      <Routes>
        {/* 指定路径和组件对应的关系 path代表路径， element代表组件 成对出现 */}
        <Route path='/' element={<Home />}></Route>
        <Route path='/about' element={<About />}></Route>
      </Routes>
    </BrowserRouter>
  );
}

核心组件–Link

作用：用于指定导航链接，完成路由跳转

语法说明：组件通过to属性指定路由地址，最终会渲染为a链接元素

<Link to='/'>首页</Link>

核心组件–Routes

作用：提供一个路由出口，满足条件的路由组件会渲染到组件内部

语法说明：

<Routes>
  {/* 指定路径和组件对应的关系 path代表路径， element代表组件 成对出现 */}
  <Route path='/' element={<Home />}></Route>
  <Route path='/about' element={<About />}></Route>
</Routes>

核心组件–Route

作用：用于指定导航链接，完成路由匹配

语法说明:path属性指定陪陪的路径地址，element属性指定要渲染的组件

  <Route path='/about' element={<About />}></Route>
  //当url路径为/about时，会渲染<About />组件