小林笔记

Appearance

React Router ​

介绍 ​

React Router 是一个前端路由解决方案，它允许你使用 URL 来展示不同的内容。

路由表 ​

jsx
const routes = [
  {
    path: '/',
    element: <Home />,
    children: [
      {
        //path: 'news',
        element: <News />,
        index: true // 默认子路由，类似于vue的redirect
      },

      {
        path: 'news/:id',
        element: <NewsDetail />
      }
    ]
  },
  { path: '/about', element: <About /> },
  
  // 404
  { path: '*', element: <NotFound /> }
]

示例 ​

声明式 ​

jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const Home = () => (
  <div>
    <h2>Home</h2>
    <p><Link to="/about">About</Link></p>
)
const About = () => (

  <div>
  <h2>About</h2>
  <p><Link to="/">Home</Link></p>
  <Route path="/" component={Home} />
)
const App = () => (
<Router>
<div>
<Route path="/about" component={About} />
</div>
)
ReactDOM.render(<App/>, document.getElementById('root'));

编程式 ​

jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const Home = () => (
  <div>
    <h2>Home</h2>
    <p><Link to="/about">About</Link></p>
    <button onClick={() => history.push('/about')}>About</button>
    <button onClick={() => history.replace('/about')}>About</button>
)
const About = () => (
  <div>
    <h2>About</h2>
    <p><Link to="/">Home</Link></p>
    <button onClick={() => history.push('/')}>Home</button>
    <button onClick={() => history.replace('/')}>Home</button>
    <Route path="/" component={Home} />
)
const App = () => (
  <Router>
    <div>
      <Route path="/about" component={About} />
      <Route path="/" component={Home} />
)
  ReactDOM.render(<App />, document.getElementById('root'));
jsx
import { useNavigate, Link } from 'react-router-dom';
const Home = () => {
  const navigate = useNavigate();
  return (
  <div>
    <h2>Home</h2>
    <p><Link to="/about">About</Link></p>
    <button onClick={() => navigate('/about')}>About</button>
)
}
const About = () => (
  <div>
    <h2>About</h2>
    <p><Link to="/">Home</Link></p>
    <button onClick={() => navigate('/')}>Home</button>
)
const App = () => (
  <div>
    <Route path="/about" component={About} />
    <Route path="/" component={Home} />

)
ReactDOM.render(<App/>, document.getElementById('root'));

导航传参 ​

useSearchParams ​

jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const Home = () => (
  <div>
    <h2>Home</h2>
    <p><Link to="/about">About</Link></p>
    <button onClick={() => history.push('/about?name=react')}>About</button>
    <button onClick={() => history.replace('/about?name=react')}>About</button>
    <Route path="/" component={Home} />
)

// useSearchParams 获取参数
const About = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  return (
    <div>
      <h2>About</h2>
      <p>{searchParams.get('name')}</p>
      <p><Link to="/">Home</Link></p>
      <button onClick={() => history.push('/')}>Home</button>
  )
}

// 路由配置
 {
  path:'about',
  element: About
 }

userparams ​

jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link, useParams } from 'react-router-dom';
const Home = () => (
  <div>
    <h2>Home</h2>
    <p><Link to="/about/react">About</Link></p>
    <button onClick={() => history.push('/about/react')}>About</button>
    <button onClick={() => history.replace('/about/react')}>About</button>
    <Route path="/" component={Home} />
)

const About = () => {
  const { name } = useParams();
  return (
    <div>
      <h2>About</h2>
      <p>{name}</p>
      <p><Link to="/">Home</Link></p>
      <button onClick={() => history.push('/')}>Home</button>
  )
}
// 路由配置
  {
    path:'about/:name'
    element: About
  }

Switch ​

匹配路径：从上到下依次匹配其内部的Route组件定义的路径。

  1. 渲染第一个匹配的路径：只渲染第一个匹配成功的Route组件对应的内容，忽略后续的Route组件。
  2. 提高性能和可读性：通过明确指定渲染路径，提高路由配置的可读性和性能。 简而言之，Switch（Routes）确保在多个路径定义中只渲染第一个匹配的路径。

Outlet功能介绍 ​

Outlet 组件用于渲染当前匹配的子路由。 Outlet 的位置: 将 Outlet 放在父组件中，以确保子路由正确渲染。

jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link, Outlet } from 'react-router-dom';

const Home = () => (
  <div>
    <h2>Home</h2>
    <p><Link to="/about">About</Link></p>
);

const About = () => (
  <div>
    <h2>About</h2>
    <p><Link to="/">Home</Link></p>
  </div>
);

const App = () => (
  <Router>
    <div>
      <Route path="/about" element={<About />} />
      <Route path="/" element={<Home />} />
      <Outlet />
    </div>
  </Router>
);

ReactDOM.render(<App />, document.getElementById('root'));

路由模式 ​

  1. HashRouter：使用 URL 的 hash 部分作为路由，如：http://localhost:3000/#/about。

  2. BrowserRouter：使用浏览器原生的 history API，如：http://localhost:3000/about。

  3. HashRouter：使用 URL 的 hash 部分作为路由，如：http://localhost:3000/#/about。

jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter as Router, Route, Link } from 'react-router-dom';
const Home = () => (
  <div>
    <h2>Home</h2>
    <p><Link to="/about">About</Link></p>
    <button onClick={() => history.push('/about')}>About</button>
    <button onClick={() => history.replace('/about')}>About</button>
    <Route path="/" component={Home} />
)
const About = () => (
  <div>
    <h2>About</h2>
    <p><Link to="/">Home</Link></p>
    <button onClick={() => history.push('/')}>Home</button>
    <button onClick={() => history.replace('/')}>Home</button>
    <Route path="/about" component={About} />
    <Route path="/" component={Home} />
)
  1. BrowserRouter：使用浏览器原生的 history API，如：http://localhost:3000/about。
jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const Home = () => (
  <div>
    <h2>Home</h2>
    <p><Link to="/about">About</Link></p>
    <button onClick={() => history.push('/about')}>About</button>
    <button onClick={() => history.replace('/about')}>About</button>
    <Route path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/" component={Home} />
)
const About = () => (
  <div>
    <h2>About</h2>
    <p><Link to="/">Home</Link></p>
    <button onClick={() => history.push('/')}>Home</button>
      <button onClick={() => history.replace('/')}>Home</button>
)

与vue-router区别 ​

  1. 路由模式：React Router 使用了不同的路由模式，如 HashRouter 和 BrowserRouter，而 Vue Router 则使用不同的路由模式，如 history 和 hash。
  2. 路由配置：在 React Router 中，路由配置通过组件的属性来完成，而 Vue Router 则通过路由规则（routes）来配置。
  3. 路由组件：在 React Router 中，路由组件通过组件的属性来完成，而 Vue Router 则通过路由规则（routes）来配置。