Práctica de gestión de enrutamiento front-end

El enrutamiento front-end es uno de los conceptos importantes en las aplicaciones web modernas, que nos permite cargar dinámicamente diferentes contenidos de página de acuerdo con los cambios de URL sin actualizar la página. El enrutamiento front-end puede permitir a los usuarios obtener una experiencia más fluida y rápida al navegar por sitios web, y también proporciona a los desarrolladores mejores métodos de organización y administración de código. Este artículo presentará los conceptos básicos y el uso del enrutamiento de front-end, y usará ejemplos para mostrar cómo administrar el enrutamiento de front-end en el combate real.

1. Concepto básico de enrutamiento front-end

1.1 ¿Qué es el enrutamiento de front-end?

El enrutamiento front-end es un mecanismo para administrar las URL del navegador y el contenido de la página. Las aplicaciones web tradicionales necesitan actualizar las páginas cuando los usuarios acceden a diferentes páginas, lo que provocará recargas de página y una pérdida de rendimiento innecesaria. El enrutamiento de front-end escucha los cambios en la URL del navegador y carga dinámicamente diferentes contenidos de página de acuerdo con los cambios en la URL, lo que hace que el cambio de página sea más fluido y rápido.

1.2 Ventajas del enrutamiento front-end

El uso del enrutamiento front-end tiene las siguientes ventajas:

Cambio de página más rápido : el enrutamiento de front-end permite un cambio de página más rápido al permitir que solo se actualice una parte de la página sin actualizar toda la página.
Mejor experiencia de usuario : el enrutamiento front-end puede hacer que los usuarios obtengan una experiencia más fluida y rápida al navegar por el sitio web sin esperar a que se cargue la página.
Mejor organización del código : el enrutamiento front-end administra la lógica de las diferentes páginas por separado, lo que hace que la organización del código sea más clara y fácil de mantener.

2. Implementación de enrutamiento front-end

2.1 Enrutamiento hash

El enrutamiento hash es una implementación del enrutamiento front-end. #Realiza el cambio de contenido de la página al escuchar la parte hash (es decir, la última parte) en la URL del navegador .

Al usar el enrutamiento hash, almacenaremos el contenido de diferentes páginas en diferentes archivos HTML y luego especificaremos la página que se cargará a través de la parte hash en la URL. Cuando un usuario hace clic en un enlace o modifica manualmente la URL, la página cargará el contenido correspondiente de acuerdo con la parte hash, realizando así el cambio de página.

Por ejemplo, una URL de http://example.com/#about, indica about.htmlel contenido a cargar.

2.2 Historial de enrutamiento

El enrutamiento de historial es otra implementación del enrutamiento de front-end. Utiliza HTML5 para History APIcambiar el contenido de la página modificando el historial del navegador.

Al usar el enrutamiento del historial, colocaremos el contenido de diferentes páginas en el mismo archivo HTML y luego History APImodificaremos dinámicamente el historial del navegador a través de él para lograr el cambio de página.

Por ejemplo, una URL de http://example.com/aboutindica que se cargará el contenido de la sección en el mismo archivo HTML /about.

3. Combate real: use React Router para la gestión de enrutamiento front-end

En este artículo, usaremos React y la biblioteca React Router para la administración de enrutamiento front-end. React Router es la biblioteca de enrutamiento de front-end más popular en la comunidad de React, que proporciona una serie de componentes y API para simplificar la implementación del enrutamiento de front-end.

3.1 Inicializar el proyecto

Primero, necesitamos crear un nuevo proyecto React e instalar React Router. Ejecute el siguiente comando en una terminal:

npx create-react-app frontend-router-demo
cd frontend-router-demo
npm install react-router-dom

3.2 Crear componentes de enrutamiento

Cree una carpeta dentro srcde la carpeta llamada .c pagesy cree dos nuevos archivos de componentes en ella: Home.jsy About.js. Estos dos componentes se utilizarán para mostrar el contenido de la página de inicio y la página de información respectivamente.

// src/pages/Home.js
import React from 'react';

const Home = () => {
  return <div>这是首页内容</div>;
};

export default Home;

// src/pages/About.js
import React from 'react';

const About = () => {
  return <div>这是关于页面内容</div>;
};

export default About;

3.3 Crear configuración de enrutamiento

Cree un archivo en srcla carpeta llamada AppRouter.jsy configure las rutas en él:

// src/AppRouter.js
import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

const AppRouter = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">首页</Link>
          </li>
          <li>
            <Link to="/about">关于</Link>
          </li>
        </ul>
      </nav>

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

export default AppRouter;

En el código anterior, primero presentamos react-router-domalgunos componentes y API en . Luego, Routerconfiguramos la barra de navegación y la lógica de conmutación de enrutamiento en el componente.

3.4 Uso de componentes de enrutamiento

Abra el archivo en srcla carpeta App.jsy reemplace su contenido con el siguiente código:

// src/App.js
import React from 'react';
import AppRouter from './AppRouter';

function App() {
  return (
    <div>
      <h1>前端路由管理实战</h1>
      <AppRouter />
    </div>
  );
}

export default App;

En el código anterior, estamos importando el AppRoutercomponente creado previamente y colocándolo en Appel componente.

3.5 Ejecución de la aplicación

Ahora, hemos completado la configuración del enrutamiento front-end y la creación de los componentes. Ejecute el siguiente comando en una terminal para iniciar la aplicación:

npm start

Esto iniciará la aplicación React y la abrirá en el navegador http://localhost:3000. Verá la barra de navegación y el contenido de la página de inicio. Haga clic en el enlace "Acerca de" en la barra de navegación y verá el contenido de la página Acerca de.

4. Implementar enrutamiento anidado

React Router también admite rutas anidadas, lo que nos permite anidar las rutas de otros componentes dentro de un componente.

4.1 Crear componentes de enrutamiento anidados

Cree un archivo en src/pagesla carpeta llamada Nested.jsy defina un componente de enrutamiento anidado dentro de él:

// src/pages/Nested.js
import React from 'react';
import { Switch, Route, Link, useRouteMatch } from 'react-router-dom';

const Nested = () => {
  const { path, url } = useRouteMatch();

  return (
    <div>
      <h2>嵌套路由示例</h2>
      <nav>
        <ul>
          <li>
            <Link to={`${url}/subpage1`}>子页面1</Link>
          </li>
          <li>
            <Link to={`${url}/subpage2`}>子页面2</Link>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route path={`${path}/subpage1`}>
          <div>这是子页面1的内容</div>
        </Route>
        <Route path={`${path}/subpage2`}>
          <div>这是子页面2的内容</div>
        </Route>
      </Switch>
    </div>
  );
};

export default Nested;

En el código anterior, usamos el gancho para obtener la suma useRouteMatchde las rutas anidadas actuales . Luego, creamos dos enlaces en la barra de navegación para cambiar entre diferentes contenidos de subpágina.pathurl

4.2 Actualizar configuración de enrutamiento

En src/AppRouter.jsel archivo, reemplazamos el Aboutcomponente creado previamente con un componente de enrutamiento anidado Nested:

// src/AppRouter.js
import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import Nested from './pages/Nested';

const AppRouter = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">首页</Link>
          </li>
          <li>
            <Link to="/about">关于</Link>
          </li>
          <li>
            <Link to="/nested">嵌套路由</Link>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={Nested} />
        <Route path="/nested" component={Nested} />
      </Switch>
    </Router>
  );
};

export default AppRouter;

En el código anterior, cambiamos el enlace "Acerca de" en la barra de navegación a "Ruta anidada" y agregamos una nueva ruta en la configuración de la ruta para mostrar la ruta anidada.

4.3 Ejecución de la aplicación

Ejecute el siguiente comando en una terminal para iniciar la aplicación:

npm start

Esto iniciará la aplicación React y la abrirá en el navegador http://localhost:3000. Verá un enlace de "Rutas anidadas" en la barra de navegación. Haga clic en el enlace, verá el contenido de la página de ejemplo de enrutamiento anidado y cambiará entre diferentes subpáginas en la página.

5. Darse cuenta de los parámetros de enrutamiento

A veces, necesitamos pasar parámetros entre rutas, como compartir datos entre páginas o pasar parámetros de consulta específicos. React Router proporciona una variedad de formas de pasar parámetros, y podemos elegir la forma adecuada según las diferentes necesidades.

5.1 Parámetros de enrutamiento

En React Router, podemos :definir parámetros de ruta usando . Por ejemplo, podemos definir un idparámetro de ruta denominado , que se utiliza para representar un ID de recurso específico.

Cree un archivo en src/pagesla carpeta llamada Resource.jsy defina un componente de parámetro de ruta en él:

// src/pages/Resource.js
import React from 'react';
import { useParams } from 'react-router-dom';

const Resource = () => {
  const { id } = useParams();

  return <div>当前资源的ID是：{id}</div>;
};

export default Resource;

En el código anterior, usamos useParamsganchos para obtener los parámetros de la ruta actual y mostrarlos en la página.

5.2 Actualizar configuración de enrutamiento

En src/AppRouter.jsel archivo, agregamos una nueva ruta para mostrar Resourceel componente y definir un parámetro de ruta:

// src/AppRouter.js
import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import Nested from './pages/Nested';
import Resource from './pages/Resource';

const AppRouter = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">首页</Link>
          </li>
          <li>
            <Link to="/about">关于</Link>
          </li>
          <li>
            <Link to="/nested">嵌套路由</Link>
          </li>
          <li>
            <Link to="/resource/123">资源123</Link>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={Nested} />
        <Route path="/nested" component={Nested} />
        <Route path="/resource/:id" component={Resource} />
      </Switch>
    </Router>
  );
};

export default AppRouter;

En el código anterior, hemos agregado una nueva ruta /resource/:id, que :idrepresenta los parámetros de la ruta.

5.3 Ejecución de la aplicación

Ejecute el siguiente comando en una terminal para iniciar la aplicación:

npm start

Esto iniciará la aplicación React y la abrirá en el navegador http://localhost:3000. Verá un enlace "Recurso 123" en la barra de navegación. Haga clic en el enlace y verá que el ID de recurso actual que se muestra en la página es 123, lo que indica que los parámetros de enrutamiento se han pasado correctamente al Resourcecomponente.

6. Redirección de enrutamiento

A veces necesitamos redirigir a un usuario a otra ruta cuando visita una ruta en particular. Por ejemplo, cuando un usuario visita la ruta raíz, queremos redirigirlo a la página de inicio.

En React Router, podemos usar Redirectcomponentes para implementar la redirección de ruta.

6.1 Actualizar configuración de enrutamiento

En src/AppRouter.jsel archivo, agregamos una nueva ruta para redirigir la ruta raíz:

// src/AppRouter.js
import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link, Redirect } from 'react-router-dom';
import Home from './pages/Home';
import Nested from './pages/Nested';
import Resource from './pages/Resource';

const AppRouter = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">首页</Link>
          </li>
          <li>
            <Link to="/about">关于</Link>
          </li>
          <li>
            <Link to="/nested">嵌套路由</Link>
          </li>
          <li>
            <Link to="/resource/123">资源123</Link>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route exact path="/">
          <Redirect to="/home" />
        </Route>
        <Route path="/home" component={Home} />
        <Route path="/about" component={Nested} />
        <Route path="/nested" component={Nested} />
        <Route path="/resource/:id" component={Resource} />
      </Switch>
    </Router>
  );
};

export default AppRouter;

En el código anterior, usamos Redirectun componente para /redirigir la ruta raíz a /home.

6.2 Ejecución de la aplicación

Ejecute el siguiente comando en una terminal para iniciar la aplicación:

npm start

Esto iniciará la aplicación React y la abrirá en el navegador http://localhost:3000. Verás que la página se redirige automáticamente a la página de inicio /home.

7. Implemente componentes de diseño con rutas anidadas

En proyectos reales, generalmente usamos componentes de diseño para envolver toda la aplicación e implementar la estructura de página común y la barra de navegación en los componentes de diseño. Las rutas anidadas de React Router son excelentes para implementar componentes de diseño.

7.1 Crear componentes de diseño

Cree un archivo en srcla carpeta llamada Layout.jsy defina un componente de diseño en él:

// src/Layout.js
import React from 'react';
import { Link } from 'react-router-dom';

const Layout = ({ children }) => {
  return (
    <div>
      <header>
        <nav>
          <ul>
            <li>
              <Link to="/">首页</Link>
            </li>
            <li>
              <Link to="/about">关于</Link>
            </li>
            <li>
              <Link to="/nested">嵌套路由</Link>
            </li>
            <li>
              <Link to="/resource/123">资源123</Link>
            </li>
          </ul>
        </nav>
      </header>

      <main>{children}</main>

      <footer>这是页脚</footer>
    </div>
  );
};

export default Layout;

En el código anterior, definimos un Layoutcomponente que contiene la barra de navegación, el área de contenido principal y el pie de página de la página.

7.2 Actualizar configuración de enrutamiento

En src/AppRouter.jsel archivo, colocamos el AppRoutercomponente creado anteriormente en Layoutel componente y agregamos la configuración de enrutamiento:

// src/AppRouter.js
import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Home from './pages/Home';
import Nested from './pages/Nested';
import Resource from './pages/Resource';
import Layout from './Layout';

const AppRouter = () => {
  return (
    <Router>
      <Layout>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={Nested} />
          <Route path="/nested" component={Nested} />
          <Route path="/resource/:id" component={Resource} />
        </Switch>
      </Layout>
    </Router>
  );
};

export default AppRouter;

En el código anterior, Switchcolocamos la ruta en el componente en Layoutel componente, realizando así la ruta anidada del componente de diseño.

7.3 Ejecución de la aplicación

Ejecute el siguiente comando en una terminal para iniciar la aplicación:

npm start

Esto iniciará la aplicación React y la abrirá en el navegador http://localhost:3000. Verá que la página contiene una barra de navegación, un área de contenido principal y un pie de página, y puede cambiar el contenido de la página según las diferentes rutas.

8. Conclusión

A través de la demostración práctica en este artículo, entendemos el concepto básico y la implementación del enrutamiento front-end, y realizamos la gestión del enrutamiento front-end a través de la biblioteca React Router. Aprendimos a configurar el enrutamiento, crear componentes de enrutamiento, implementar rutas anidadas, pasar parámetros de ruta e implementar la redirección de rutas. Al mismo tiempo, también vimos cómo usar rutas anidadas para implementar componentes de diseño, proporcionando una estructura común y una barra de navegación para toda la aplicación.

El enrutamiento front-end juega un papel importante en las aplicaciones web modernas, no solo puede mejorar la experiencia del usuario, sino también hacer que el código sea más modular y fácil de mantener. Espero que este artículo lo ayude en la administración de enrutamiento de front-end, para que pueda crear aplicaciones de front-end más eficientes y elegantes en la práctica. ¡Feliz codificación!