用14行代码来学习路由的基本原理

2023-12-07 05:57:43

import {useLocation, useNavigate} from "react-router-dom";

const Route = ({path, children}) => {
  let location = useLocation();
  let navigate = useNavigate();

  return (
    <>
      {location.pathname === path && children}
      <a onClick={() => navigate(path)}>切换到 {path}</a>
    </>
  );
};

export default Route;

// 初始化导航和内容区域
function init() {
  const nav = document.getElementById('nav');
  const content = document.getElementById('content');

  const routes = [
    {path: '/', content: '主页'},
    {path: '/about', content: '关于我们'},
    {path: '/contact', content: '联系我们'},
  ];

  // 添加切换导航的监听器
  nav.addEventListener('click', e => {
    const link = e.target.closest('a');
    if (link) {
      // 获取链接的路径，并通过路由切换到该路径
      const path = link.getAttribute('href').replace(/#.*/, '');
      navigate(path);
    }
  });

  // 将路径和内容的映射关系添加到路由
  routes.forEach(route => {
    route.element = document.createElement('div');
    route.element.textContent = route.content;
    content.appendChild(route.element);
  });

  // 监听URL变化，并根据当前URL显示相应的内容
  addEventListener('hashchange', () => {
    const path = window.location.hash.replace(/#.*/, '');
    const route = routes.find(route => route.path === path);
    if (route) {
      // 隐藏所有内容
      for (const r of routes) {
        r.element.classList.add('hidden');
      }

      // 显示当前内容
      route.element.classList.remove('hidden');
    }
  });

  // 初始显示第一个路由的内容
  const firstRoute = routes[0];
  firstRoute.element.classList.remove('hidden');
}

// 加载HTML后初始化路由
window.addEventListener('load', init);

14行代码创建一个极简的单页路由

在如今的前端开发中，单页应用已经成为一种主流的开发模式。相比于传统的刷新页面加载新内容的模式，单页应用具有更好的用户体验。

单页应用的核心组件之一就是路由。路由可以理解为一种在不同页面之间进行切换的机制，而在React中，我们可以使用react-router-dom库来实现路由功能。

下面，我们就来使用react-router-dom库来创建一个小型的路由，它的代码长度只有14行。

import {BrowserRouter as Router, Route, Link} from "react-router-dom";

const App = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/">主页</Link></li>
        <li><Link to="/about">关于我们</Link></li>
        <li><Link to="/contact">联系我们</Link></li>
      </ul>

      <Route path="/" exact component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/contact" component={Contact}/>
    </div>
  </Router>
);

const Home = () => <h1>主页</h1>;
const About = () => <h1>关于我们</h1>;
const Contact = () => <h1>联系我们</h1>;

export default App;