如何使用 react-router-dom v6 中的按鈕路由到另一個反應組件

Question

我對反應完全陌生，並陷入了以下“路線”部分。 這是代碼：

這是我的 ListEmployeeComponent：

import React, { Component } from 'react';
import EmployeeService from '../services/EmployeeService';

class ListEmployeesComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            employees: []
        }
        this.addEmployee = this.addEmployee.bind(this);
    }

    componentDidMount() {
        EmployeeService.getEmployees().then((res) => {
            this.setState({employees: res.data});
        });
    }

    addEmployee() {
        this.props.history.push('add-employee');
    }

    render() {
        return (
            <div>
                <h2 className="text-center">Employee List</h2>
                <div className="row">
                    <button className="btn btn-primary" onClick={this.addEmployee}>Add Employee</button>
                </div>
                <div className="row">
                    <table className="table table-striped table-bordered">
                        
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Email Id</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        
                        <tbody>
                            {
                                this.state.employees.map(
                                    employee =>
                                    <tr key={employee.id}>
                                        <td>{employee.id}</td>
                                        <td>{employee.firstName}</td>
                                        <td>{employee.lastName}</td>
                                        <td>{employee.email}</td>
                                    </tr>
                                )
                            }
                        </tbody>
                    </table>
                </div>
            </div>
        );
    }
}

export default ListEmployeesComponent;

這是我的 App.js：

import './App.css';
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom'
import FooterComponent from './components/FooterComponent';
import HeaderComponent from './components/HeaderComponent';
import ListEmployeesComponent from './components/ListEmployeesComponent';
import CreateEmployeeComponent from './components/CreateEmployeeComponent';

function App() {
  return (
    <div>
      <Router>
        <HeaderComponent/>
        <div className="container">
          <Routes>
            <Route path="/" element={<ListEmployeesComponent/>}></Route>
            <Route path="/home" element={<ListEmployeesComponent/>}></Route>
            <Route path="/add-employee" element={<CreateEmployeeComponent/>}></Route>
          </Routes>
        </div>
        <FooterComponent/>
      </Router>
    </div>
  )
}

export default App;

我的問題是我想在單擊按鈕時路由到 CreateEmployeeComponent，但是當我單擊按鈕時沒有發生任何操作。 我嘗試檢查 react-router v6 的新文檔，但沒有太大幫助。 我可以在這里做些什么來解決我的問題？

Answer 1

解決方案1：

您可以使用 react-router-dom 中的鏈接將按鈕包裝在 ListEmployeeComponent 中。

<Link to="/add-employee">
   <button className="btn btn-primary">Add Employee</button>
</Link>

參考： react-router-dom

解決方案2：

react-router-dom v6中的歷史記錄已被 Navigate 取代。 因此，如果您想將/add-employee推送到歷史記錄，您需要使用<Navigate to='/add-employee' push={true}/>

在您的 ListEmployeeComponent.js 中進行以下更改：

在構造函數中添加 state ：

constructor(props) {
    super(props);
    this.state = {
        navigate: false,
        employees: []
    }
    this.addEmployee = this.addEmployee.bind(this);
}

更改您的 function：

addEmployee() {
   this.props.history.push('add-employee');
}

至

addEmployee() {
  this.setState({
    navigate: true,
  });
}

並將您的渲染方法更改為：

  render() {
    const { navigate } = this.state;
    if (navigate) {
      return <Navigate to="/add-employee" push={true} />;
    }

    return (
      <div>
        <h2 className="text-center">Employee List</h2>
        <div className="row">
        ........
        //rest of the code
  }

參考： react-router-dom-v6 文檔

Answer 2

首先，您必須在 ListEmployeeComponent 中導入鏈接，並且必須在鏈接標簽之間使用按鈕標簽，並且您必須將 [to="/add-employee"] 屬性添加到鏈接標簽

代碼：從“react-router-dom”導入 {Link}

添加員工

我想你的問題將由此解決