React 路由react-router-dom详解

React Router DOM 是 React 应用程序的一个常用路由解决方案。以下是如何使用 React Router DOM 的一些关键概念的示例：

1. 安装：

npm install react-router-dom

2. 使用 BrowserRouter 或 HashRouter 作为应用程序的入口点：

import { BrowserRouter } from 'react-router-dom';
 
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

3. 使用 Route 组件定义路由：

import { Route } from 'react-router-dom';
 
function App() {
  return (
    <div>
      <Route path="/home" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/users/:id" element={<User />} />
    </div>
  );
}

4. 使用 Routes 组件包装多个 Route 组件：

import { Routes, Route } from 'react-router-dom';
 
function App() {
  return (
    <Routes>
      <Route path="/home" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/users/:id" element={<User />} />
    </Routes>
  );
}

5. 使用 NavLink 或 Link 组件创建导航链接：

import { Link } from 'react-router-dom';
 
function NavBar() {
  return (
    <nav>
      <Link to="/home">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

6. 使用 Outlet 组件表示子路由：

import { Outlet } from 'react-router-dom';
 
function Users() {
  return (
    <div>
      <h2>Users</h2>
      <Outlet />
    </div>
  );
}

7. 使用 Nested Routes 定义子路由：

import { Routes, Route } from 'react-router-dom';
 
function App() {
  return (
    <Routes>
      <Route path="/users" element={<Users />}>
        <Route path=":id" element={<UserProfile />} />
      </Route>
    </Routes>
  );
}

以上是 React Router DOM 的基本使用方法，涵盖了路由定义、链接和嵌套路由的常见场景。