亲宝软件园·资讯

展开

React Router V6更新内容

ToString()° 人气:0

React Router V6 变更介绍

之前一直在用5.x版本的Router,突然发现Router V6有一些变化,可以说是对嵌套路由更加友好了。这里,我们就做个简单的介绍。

1. < Switch > 重命名为< Routes >

之前在用Router时,需要用Switch包裹,Switch可以提高路由匹配效率(单一匹配) 。在V6中,该顶级组件将被重命名为Routes,注意的是其功能大部分保持不变。

2. < Route >的新特性变更

component/render被element替代

// v5
<Switch>
    <Route  path="/about" component={About}/>
    <Route  path="/home" component={Home}/>
</Switch>
//v6
<Routes>
    <Route  path="/about" element={<About/>}/>
    <Route  path="/home" element={<Home/>}/>
</Routes>

3. 嵌套路由变得更简单

3.1 具体变化有以下:

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About/>}>
          <Route path="/about/message" element={<Message/>} />
          <Route path="/about/news" element={<News/>} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}
function About() {
  return (
    <div>
      <h1>About</h1>
      <Link to="/about/message">Message</Link>
	  <Link to="/about/news">News</Link>
        {/*
       将直接根据上面定义的不同路由参数,渲染<MyProfile />或<OthersProfile />
        */}
      <Outlet />
    </div>
  )
}

这里的< Outlet /> 相当于占位符,像极了{this.props.children},也越来越像Vue了

加载全部内容

相关教程
猜你喜欢
用户评论