ReactJS中带有参数问题的路由答案

【问题标题】：Routing with parameter issue in ReactJSReactJS中带有参数问题的路由
【发布时间】：2019-06-14 13:38:50
【问题描述】：

我正在将简单的员工列表和详细演示放入 ReactJS。我有员工列表组件，它显示从一些虚拟休息网络服务获取的所有员工列表并显示在页面上。

class contactList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      employees: [],
    };
  }

  componentDidMount() {
    this.EmployeeList();
  }
  EmployeeList() {
    fetch('https://jsonplaceholder.typicode.com/comments')
      .then(response => response.json())
      .then(results => {
        this.setState({ employees: results })
        .catch(
          error => { console.log(error); }
        );
      });

  }
  onDelete(e) {

  }

  render() {
    console.log(this.state.employees);
    const persons = this.state.employees.map((item, i) => (
      <div>
        <table>
          <tbody>
            <tr>
              <td>
                <Link to={"/Contactdetails/" + item.id} >{item.name}</Link>
                <Route exact path={"/Contactdetails/:id"} component={Contactdetails}></Route>
              </td>
              <td>
                <button onClick={this.onDelete}>
                  Delete
                                </button>
              </td>
            </tr>

          </tbody>
        </table>
        {/* <Link to="/">Delete</Link> */}
      </div>
    ));

    return (
      <div id="layout-content" className="layout-content-wrapper">
        <div className="panel-list">{persons}</div>
      </div>
    );
  }

我已经在页面上显示了所有带有相应 id(parameter) 的标签。单击链接时出现问题，它不会带我进入详细信息页面。在详细页面中，我在渲染方法中也保持警报，但它也没有出现，所以，我认为详细页面没有被调用。

class Contactdetails extends Component {
    constructor(props) {
        super(props);
        this.state = {

        };
    }
    componentWillMount(){
        alert("Helloo");
    }

    componentDidMount() {
        console.log("props: ", this.props.match)
        this.EmployeeDetails();
    }

    EmployeeDetails() {
        fetch('http://dummy.restapiexample.com/api/v1/employees')
            .then(response => response.json())
            .then(results => { this.setState({ employees: results }) });
    }
    render() {
        alert("Hello");
        return (
            <h2>Contact Details</h2>
        )
    }
};

StackBlitz 链接： https://stackblitz.com/edit/react-f4eha2?file=Contactdetails.js

【问题讨论】：

点击链接后的url是什么？
/Contactdetails/1 - 像这样的东西。我点击后，它改变了网址，我在页面上看不到任何东西
请打开浏览器控制台，可能会出现一些错误
了解为什么会这样，请查看我的回答。
@UbiquitousDevelopers：试试 Danyal soultion 这就是问题所在

标签： reactjs react-router

【解决方案1】：

您在 ContactList 组件中指定了路径为 /contactDetails/:id 的 Route，如果 Route 不是 contactList 则不会调用该路由，因此您看不到 ContactDetails 组件。相反，您需要定义您的路线，例如

  <Route path="/contactList" component={ContactList} />
  <Route exact path={"/Contactdetails/:id"} component={Contactdetails} />
  <Route path="/addContact" component={AddContact} />

Working demo

【讨论】：

【解决方案2】：

将详细信息页面路由添加到您的主路由器文件，而不是在 ContactList.js 中。这是因为它永远不会被调用，因为您的应用程序会从主路由器文件或页面中查找路由。

<Switch>
  // Your Routes
  <Route exact path={"/Contactdetails/:id"} component={Contactdetails} />
  // The '/Contactdetails' route after /:id route since it will other wise not call the above one
</Switch>

【讨论】：

【解决方案3】：

在这种情况下，您需要首先实现可以注册应用程序路由的路由器，例如

<Route path="/contactList" component={ContactList} />
<Route path="/addContact" component={AddContact} />

请查看详情React Router

【讨论】：

我的其他路由都在工作，只有细节路由不工作。您也可以检查 stackblitz 链接。如果路由器有问题，它应该全部工作或不全部工作