Question

我是React的新手，我正在做一个项目，实际上这是一个待办事项列表，我需要制造一个路由器，当我在

上单击我的项目时，他们会将我发送到该项目的详细信息。这是我的实际代码。那就是我的app.js

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

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      term: '',
      items: []
    };
  }

  onChange = (event) => {
    this.setState({ term: event.target.value });
  }

  onSubmit = (event) => {
    event.preventDefault();
    this.setState({
      term: '',
      items: [...this.state.items, this.state.term]
    });
  }

  render() {
    return (
      <div style={{display: "flex", flexDirection: 'column', alignItems: "center", margin: 5}}>
        <form onSubmit={this.onSubmit}>
          <input style={{borderRadius: 3, borderColor: "black"}} 
          value={this.state.term} onChange={this.onChange} />
          <button style={{borderRadius: 3, borderColor: "black"}}>
            Adicionar</button>
        </form>
        <List items={this.state.items}/>
      </div>
    );
  }
}

这是我的List.js

import React from 'react';

const List = ({ items }) => (

  <ul style={{display: "block", listStyleType: "none", backgroundColor: "red"}}>
    {
      items && items.map((item, index) => <li key={index}>{item}</li>)
    }
  </ul>
  );

export default List;

所以我现在必须使用一些库来制作路线，但是首先我需要知道如何使itens可点击，当我单击它们时，它们会返回可以重定向到详细视图的内容。有道理吗？

你们推荐一个图书馆来做这项工作吗？

谢谢

Answer 1

您可以在每个onClick上添加一个li来重定向到所需的url（实现可能会因您选择要处理的根目录而异），但这并不是一个好主意，因为HTML li不应被单击。

我要做的是在每个<Link />内都有一个链接（再次参见路由库-通常它提供一个<li>组件）。这样可以为您的代码提供更好的语义。

希望这是有道理的。

至于一个好的库... React-router或reach-router非常不错！

Answer 2

我认为，您需要在React As中使用自定义链接：

1）npm i react-router-dom

2）import {Link} from 'react-router-dom';

3）最后使用<Link to="paste_your_url_here" />

您还可以将<Link to='' />放在ul，li之内。

点击<li>进入另一个视图

2 个答案: