React Router V6更新內(nèi)容詳解

更新時(shí)間：2021年12月23日 09:55:08 作者：ToString()°

這篇文章主要為大家介紹了React Router V6更新內(nèi)容，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

React Router V6 變更介紹

之前一直在用5.x版本的Router，突然發(fā)現(xiàn)Router V6有一些變化，可以說是對(duì)嵌套路由更加友好了。這里，我們就做個(gè)簡(jiǎn)單的介紹。

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

之前在用Router時(shí)，需要用Switch包裹，Switch可以提高路由匹配效率(單一匹配) 。在V6中，該頂級(jí)組件將被重命名為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. 嵌套路由變得更簡(jiǎn)單

3.1 具體變化有以下：

< Route children > 已更改為接受子路由。
比< Route exact >和< Route strict >更簡(jiǎn)單的匹配規(guī)則。
< Route path > 路徑層次更清晰。

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>
        {/*
       將直接根據(jù)上面定義的不同路由參數(shù)，渲染<MyProfile />或<OthersProfile />
        */}
      <Outlet />
    </div>
  )
}

這里的< Outlet /> 相當(dāng)于占位符，像極了{(lán)this.props.children}，也越來越像Vue了??。

3.2 廢棄了V5中的Redirect

//v5
<Redirect to="/"/>
//v6
<Route path="*" element={<Navigate to="/" />}/>

3.3 多個(gè)< Routes />

以前，我們只能在React App中使用一個(gè) Routes。但是現(xiàn)在我們可以在React App中使用多個(gè)路由，這將幫助我們基于不同的路由管理多個(gè)應(yīng)用程序邏輯。

import React from 'react';
import { Routes, Route } from 'react-router-dom';
function Dashboard() {
  return (
    <div>
      <p>Look, more routes!</p>
      <Routes>
        <Route path="/" element={<DashboardGraphs />} />
        <Route path="invoices" element={<InvoiceList />} />
      </Routes>
    </div>
  );
}
function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="dashboard/*" element={<Dashboard />} />
    </Routes>
  );
}

4. 用useNavigate代替useHistory

// v5
import { useHistory } from 'react-router-dom';
function MyButton() {
  let history = useHistory();
  function handleClick() {
    history.push('/home');
  };
  return <button onClick={handleClick}>Submit</button>;
};
//v6中history.push()替換為navigation()
import { useNavigate } from 'react-router-dom';
function MyButton() {
  let navigate = useNavigate();
  function handleClick() {
    navigate('/home');
  };
  return <button onClick={handleClick}>Submit</button>;
};

history的用法也將被替換成：

// v5
history.push('/home');
history.replace('/home');
// v6
navigate('/home');
navigate('/home', {replace: true});

5. Hooks中新鉤子useRoutes代替react-router-config

function App() {
  let element = useRoutes([
    { path: '/', element: <Home /> },
    { path: 'dashboard', element: <Dashboard /> },
    { path: 'invoices',
      element: <Invoices />,
      children: [
        { path: ':id', element: <Invoice /> },
        { path: 'sent', element: <SentInvoices /> }
      ]
    },
    // 重定向
    { path: 'home', redirectTo: '/' },
    // 404找不到
    { path: '*', element: <NotFound /> }
  ]);
  return element;
}