react router初探|青训营笔记

React 使用外部库来处理路由；然而，在我们可以使用该库实现路由之前，我们必须首先将它安装到我们的项目中，这是通过在终端（在您的项目目录中）运行以下命令来完成的：

npm install react-router-dom@6

要配置react router，需要写入index.js文件中，如下所示:

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
 <React.StrictMode>
    <BrowserRouter>
       <App />
    </BrowserRouter>
 </React.StrictMode>
);

这些Routes有两大属性：

• path：顾名思义，这标识了我们希望用户到达设置组件所采用的路径。当我们设置为时path，/about例如，当用户添加/about到 URL 链接时，它会导航到该页面。

• element：这里包含了我们要设置路径加载的组件。这很容易理解，但是请记住我们在这里使用的任何组件都要导入，否则会出错。

注意： 我们创建了一个文件夹 (Pages) 以将所有页面组件与实际组件分开。

当我们转到浏览器并尝试通过 URL 进行导航时，它将加载我们在此类页面上拥有的任何内容。

如何使用链接访问已配置的路由

这是通过 Link 标签完成的，就像<a>HTML 中的标签一样。我们制作了一个 NavBar 组件，并将其放置在 App.js 文件中我们的路由顶部，这样无论路由如何，它都会出现：

// App.js
import NavBar from './Components/NavBar';

const App = () => {
 return (
    <>
       <NavBar />
       <Routes>
          // ...
       </Routes>
    </>
 );
};
export default App;

现在让我们以这种方式将链接添加到 NavBar：

// Components/NavBar.js
import { Link } from 'react-router-dom';

const NavBar = () => {
 return (
 <nav>
       <ul>
          <li>
             <Link to="/">Home</Link>
          </li>
          <li>
             <Link to="/about">About</Link>
          </li>
          <li>
             <Link to="/products">Products</Link>
          </li>
       </ul>
 </nav>
 );
};

export default NavBar;

实现活动链接

NavLink通过使用组件而不是组件来处理和实现 React 中的活动链接功能更容易，组件通过向此类链接添加ofLink来了解用户当前是否被导航到。class``active

该NavLink组件现在将替换Link以下组件NavBar：

// NavBar.js
import { NavLink } from 'react-router-dom';

const NavBar = () => {
 return (
    <nav>
       <ul>
          <li>
             <NavLink to="/">Home</NavLink>
          </li>
          <li>
             <NavLink to="/about">About</NavLink>
          </li>
          <li>
             <NavLink to="/products">Products</NavLink>
          </li>
       </ul>
    </nav>
 );
};

export default NavBar;