React - 页面跳转

背景简介

在React应用中设置路由，以便能够跳转到新的页面，通常使用react-router-dom库来完成。

环境信息

1. React 项目已创建【React - Hello World】

详细步骤

第一步： 安装 react-router-dom

$ npm install react-router-dom

added 6 packages in 10s

268 packages are looking for funding
  run `npm fund` for details

第二步： 添加新页面用于跳转

• 文件路径： src/NewPage/NewPage.js

// src/NewPage/NewPage.js
import React from 'react';

const NewPage = () => {
  return <h1>This is a routing demo</h1>;
};

export default NewPage;

第三步： 更新 app.js 文件，添加 route demo

• 文件路径：src/app.js

import logo from './logo.svg';
import './App.css';

// add router components
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

// add new page
import NewPage from './NewPage/NewPage';

function App() {
  return (
    <Router>
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
          {/* Link to the new page */}
          <Link to="/demo-route-page" className="App-link">
            demo-route-page
          </Link>
        </header>
        {/* Routes wrapper */}
        <Routes>
          {/* Route for the new page */}
          <Route path="/demo-route-page" element={<NewPage />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

第四步： 启动项目并查看效果

$ npm start

• 点击 demo-route-page link

以上便是本文的全部内容，感谢您的阅读，如遇到任何问题，欢迎在评论区留言讨论。