React学习记录·react-router-dom

不二在掘金90113
523 阅读2分钟

V6版

新版特性

  1. <Switch>重命名为<Routes>。
  2. <Route>的新特性变更。
  3. 嵌套路由变得更简单。
  4. 用useNavigate代替useHistory。
  5. 新钩子useRoutes代替react-router-config。
  6. 大小减少：从20kb到8kb
function App() {
  return (
    <div className="App">
        <BrowserRouter>
          <Routes>
            <Route path="/" element={<ToLogin></ToLogin>}></Route>
            <Route path="/login" element={<Login></Login>}></Route>
            <Route path="/pages" element={<Index></Index>}>
                {/* /pages/helloPage */}
              <Route path="helloPage" element={<HelloPage></HelloPage>}></Route>
                {/* /pages/page2 */}
              <Route path="page2" element={<Page2></Page2>}>
                  {/* /pages/page2/page3 */}
                <Route path="page3" element={<Page3></Page3>}></Route>
              </Route>
              <Route path="refs" element={<Refs></Refs>}></Route>
            </Route>
          </Routes>
        </BrowserRouter>
    </div>
  );
}

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

该顶级组件将被重命名。但是，其功能大部分保持不变

// v5 
<Switch> 
    <Route exact path="/"><Home /></Route> 
    <Route path="/profile"><Profile /></Route> 
</Switch> 

// v6 
<Routes> 
    <Route path="/" element={<Home />} /> 
    <Route path="profile/*" element={<Profile />} /> 
</Routes>

2.<Route>的新特性变更

component/render被element替代，v6版不再使用component/render

import Profile from './Profile';

// v5
<Route path=":userId" component={Profile} />
<Route
  path=":userId"
  render={routeProps => (
    <Profile routeProps={routeProps} animate={true} />
  )}
/>

// v6
<Route path=":userId" element={<Profile />} />
<Route path=":userId" element={<Profile animate={true} />} />

3.嵌套路由变得更简单

  • <Route children> 已更改为接受子路由。
  • 比<Route exact>和<Route strict>更简单的匹配规则。
  • <Route path> 路径层次更清晰。
3.1.简化嵌套路由

v5中的嵌套路由必须非常明确定义

// v5
import {
  BrowserRouter,
  Switch,
  Route,
  Link,
  useRouteMatch
} from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/profile" component={Profile} />
      </Switch>
    </BrowserRouter>
  );
}

function Profile() {
  let { path, url } = useRouteMatch();

  return (
    <div>
      <nav>
        <Link to={`${url}/me`}>My Profile</Link>
      </nav>

      <Switch>
        <Route path={`${path}/me`}>
          <MyProfile />
        </Route>
        <Route path={`${path}/:id`}>
          <OthersProfile />
        </Route>
      </Switch>
    </div>
  );
}

而在v6中

// v6
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  Outlet
} from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="profile/*" element={<Profile/>} />
      </Routes>
    </BrowserRouter>
  );
}

function Profile() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

      <Routes>
        <Route path="me" element={<MyProfile />} />
        <Route path=":id" element={<OthersProfile />} />
      </Routes>
    </div>
  );
}

注意
V6版中，嵌套路由如果写作绝对路径，则必须在以父级路由开头，如：

// 父级：/pages
// 子级：/pages/refs
<Routes>
    <Route path="/pages" element={<Index></Index>}>
        <Route path="refs" element={<Refs></Refs>}></Route>
        {/*或者*/}
        <Route path="/pages/refs" element={<Refs></Refs>}></Route>
        
        {/*以上两种写法正确，以下写法错误*/}
        <Route path="/refs" element={<Refs></Refs>}></Route>
    </Route>
</Routes>
3.2.新增的API:Outlet

类似于vue的<router-view />,渲染嵌套的子路由页面

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="profile" element={<Profile />}>
          <Route path=":id" element={<MyProfile />} />
          <Route path="me" element={<OthersProfile />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

function Profile() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>
        {/*
       将直接根据上面定义的不同路由参数，渲染<MyProfile />或<OthersProfile />
        */}
      <Outlet />
    </div>
  )
}
3.3 多个<Routes />

以前，我们只能 在React App中使用一个 Routes。但是现在我们可以在React App中使用多个路由，这将帮助我们基于不同的路由管理多个应用程序逻辑。

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>;
};

现在，history.push()将替换为navigation()：

// v6
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});
navigate(-1);//返回上一页

5. 新钩子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;
}

5. class组件使用Navigate跳转


class Login extends Component {
    constructor(props: Props) {
        super(props)
        // 改变jump的值，进行跳转
        this.state = {
            jump: false
        }
    }

    render(): ReactNode {
        return (
            <div>
                <Button onClick={() => this.setState({ jump: true })}>前往首页</Button>
                {this.state.jump && (<Navigate to="/pages" replace={true} />)}
            </div>
        );
    }
}

贴一个React的Navigate定义


/**
 * Changes the current location.
 *
 * Note: This API is mostly useful in React.Component subclasses that are not
 * able to use hooks. In functional components, we recommend you use the
 * `useNavigate` hook instead.
 *
 * @see https://reactrouter.com/docs/en/v6/api#navigate
 */
export declare function Navigate({ to, replace, state }: NavigateProps): null;

官方的迁移指南在这里：React Router v6迁移指南

V5版中文文档
V6版中文文档

avatar
文章
阅读
粉丝