如何使用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 中进行以下更改：

在你的构造函数中添加一个状态：

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

改变你的功能：

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 doc

Answer 2

首先你必须在 ListEmployeeComponent 中导入链接 和 必须在链接标签之间使用按钮标签 并且您必须将 [to="/add-employee"] 属性添加到链接标签

import {Link} from "react-router-dom";

<Link to="/add-employee"> 
    <button 
        className="btn btn-primary" 
        onClick={this.addEmployee}
    >
        Add Employee
    </button>
</Link>