关于前端:通过vue学习react五-路由router

react router v6 版本的路由实现

喜爱就点赞呗

装置

pnpm add react-router-dom

残缺代码

# App.tsx
function App() {
  return (
    <div className="App">
      <nav style={{margin: 10}}>
        <Link to="/" style={{padding: 5}}>
          Home
        </Link>
        <Link to="/about" style={{padding: 5}}>
          About
        </Link>
        <Link to="/list" style={{padding: 5}}>
          About
        </Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home txt="2333" />}></Route>
        <Route path="about" element={<About />}></Route>
        <Route path="*" element={<NoMatch />} />
        <Route path="list" element={<List />}>
          <Route path="/list" element={<ListLink />}></Route>
          <Route path=":id" element={<ListId />}></Route>
        </Route>
      </Routes>。</div>
  );
}

Api

根本路由实现

其中 Home, 和 About 的代码就不进行展现了

<Route path="/" element={<Home />}></Route>
<Route path="about" element={<About />}></Route>

则是定义路由

不过这些很快就能分分明, 不过须要深刻理解的是嵌套路由
上面的代码次要也是 list 为主

404 路由

<Route path="*" element={<NoMatch />} />

当 Routes 中寻找不到的时候, 咱们在最初一个路由中增加正则就能够指定 404 了

重定向

应用导航组件重定向

咱们能够通过应用 React Router 的 Navigate 组件来执行申明性重定向。在上面的示例中，每当用户导航到 ” 对于 ” 页时，导航组件都将以申明形式执行重定向：

const About = () => {
  const shouldRedirect = true;

  return (
    <>
      <h2>About</h2>
      {shouldRedirect && <Navigate replace to="/home" />}
    </>
  );
};

如果咱们想在路由级别对此进行治理，咱们也能够应用以下代替解决方案：

# App.tsx
<Route
  path="about"
  element={
    shouldRedirect ? (<Navigate replace to="/home" />) : (<About />)
  }
/>

应用重定向导航钩子

const About = () => {
  const shouldRedirect = true;

  const navigate = useNavigate();

  React.useEffect(() => {if (shouldRedirect) {navigate('/home');
    }
  });

  return (
    <>
      <h2>About</h2>
    </>
  );
};

每当组件出现时，React 的 useEffect Hook 都会运行，并将以编程形式执行重定向。

嵌套路由 (list) 的实现

<Route path="list" element={<List />}>
  <Route path="/list" element={<ListLink />}></Route>
  <Route path=":id" element={<ListId />}></Route>
</Route>

上方代码次要组成是这样的,

当咱们拜访http://localhost:3000/list

<List>
 <ListLink></ListLink>
</List>

当咱们拜访http://localhost:3000/list/1

<List>
 <ListId />
</List>

残缺代码

List.tsx

Outlet 嵌套路由相似 {children}

import {Outlet} from 'react-router-dom';
class List extends React.Component {constructor(props: React.FC) {super(props);
  }

  render() {
    return (<div style={{ padding: 20}}>
        <h2>Blog</h2>
        <Outlet />
      </div>
    );
  }
}

ListLink.tsx

const lists = {
  "1": {
    title: "第一篇文章",
    desc: "test1",
  },
  "2": {
    title: "第二篇文章",
    desc: "test2",
  },
};

class ListLink extends React.Component {constructor(props: React.FC) {super(props);
  }

  render() {
    return (
      <ul>
        {Object.entries(lists).map(([key, { title}]) => (<li key={key}>
            <Link to={`/list/${key}`}>
              <h3>{title}</h3>
            </Link>
          </li>
        ))}
      </ul>
    );
  }
}

ListId.tsx

useParams 获取路由参数

export default function ListId() {
  const lists: Record<
    string,
    {
      title: string;
      description: string;
    }
  > = {
    "1": {
      title: "第一篇博客文章",
      description: "第一篇博客文章，是对于 Vue3.0 的",
    },
    "2": {
      title: "第二篇博客文章",
      description: "Hello React Router v6",
    },
  };

  const {id} = useParams();
  const blog = lists[id as string];
  const {title, description} = blog;
  return (<div style={{ padding: 20}}>
      <h3>{title}</h3>
      <p>{description}</p>
    </div>
  );
}

路由对立治理及路由拦挡计划

这篇文章曾经写的很好了, 就不反复阐明了
react-router v6 路由对立治理及路由拦挡计划

参考

React Router v6 使用指南
React Router 6: Redirect