Question

下面的 react.js 代码允许您查看 table.js 文件中存在的组件的表格，这允许您查看表格并保存在其中的访问权限，以查看您需要单击按钮的数据在表中生成的每一行中，当用户单击路由 /app/editclient 中存在的新 EditClient 组件时，必须显示，现在当我使用此 react-router 执行对端点 /app/editclient 的调用时配置重定向到这里，修改显示路由器的函数是：getEventEditUser

/app/editclient --> /app/editclient#/app/main/dashboard

现在我该如何解决这个问题？因为路径不对

Layout.js

<TransitionGroup>
                <CSSTransition
                  key={this.props.location.key}
                  classNames="fade"
                  timeout={200}
                >
                  <Switch>
                    <Route path="/app/main" exact render={() => <Redirect to="/app/main/dashboard" />} />
                    <Route path="/app/main/dashboard" exact component={Dashboard} />
                    <Route path="/app/icons" exact component={UIIcons} />
                    <Route path="/app/notifications" exact component={UINotifications} />
                    <Route path="/app/charts" exact component={Charts} />
                    <Route path="/app/tables" exact component={TablesStatic} />
                    <Route path="/app/maps" exact component={MapsGoogle} />
                    <Route path="/app/typography" exact component={CoreTypography} />
                    <Route path="/app/editclient" exact component={EditClient} />
                  </Switch>
                </CSSTransition>
              </TransitionGroup>

Table.js：

class Static extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();

    this.state = {
      tableStyles: [
      ],

    };

    this.checkAll = this.checkAll.bind(this);
  }

  parseDate(date) {
    this.dateSet = date.toDateString().split(" ");

    return `${date.toLocaleString("en-us", { month: "long" })} ${
      this.dateSet[2]
    }, ${this.dateSet[3]}`;
  }

  checkAll(ev, checkbox) {
    const checkboxArr = new Array(this.state[checkbox].length).fill(
      ev.target.checked
    );
    this.setState({
      [checkbox]: checkboxArr,
    });
  }

  //Function create user
  async newuser(event){
    let ragionesocialetext = event.target.value;
    console.log("Ragione Sociale: "+ragionesocialetext);
  }

  getEventEditUser(id){
    window.open("/app/editclient");
    console.log("Identificativo: "+id);
  }

  //Function call con text change
  async handleChange(event) {
    let searchtext = event.target.value;
    var result=await ricercaclienti(searchtext);
    var results=[];
    for(var i=0; i<result.length; i++){
      var value={
        id: result[i].IdCliente,
        picture: require("../../../images/cliente.jpg"), // eslint-disable-line global-require
        description: result[i].RagioneSociale,
        info: {
          citta: result[i].Citta,
          provincia: result[i].Provincia,
        },
        DataInserimento: result[i].DataInserimento,
        Cap: result[i].Cap,
        progress: {
          percent: 30,
          colorClass: "warning",
        }
      };
      results.push(value);
    }
    this.setState({tableStyles: results});
  }


  render() {
    return (
      <div className={s.root}>
        <h2 className="page-title">
          Clienti - <span className="fw-semi-bold"> Anagrafia</span>
        </h2>
        <Row>
          <Col>

            <Widget

              settings
              close
              bodyClass={s.mainTableWidget}
            >
                <p></p>
                <p></p>
                <p></p>
                <p></p>

            <FormGroup >
            <InputGroup className="input-group-no-border">
              <InputGroupAddon addonType="prepend">
                <InputGroupText>
                  <i className="fa fa-search text-white" />
                </InputGroupText>
              </InputGroupAddon>
              <Input
                id="search-input"
                className="input-transparent"
                placeholder="Ricerca"
                type='text'
  name='ricerca'
  onChange={this.handleChange.bind(this)}
              />
            </InputGroup>
          </FormGroup>
              <Table striped>
                <thead>
                  <tr className="fs-sm">
                    <th className="hidden-sm-down">#</th>
                    <th>Cliente</th>
                    <th>Ragione Sociale</th>
                    <th className="hidden-sm-down">Indirizzo</th>
                    <th className="hidden-sm-down">Data Inserimento</th>
                    <th className="hidden-sm-down">CAP</th>
                    <th className="hidden-sm-down">Edit</th>
                  </tr>
                </thead>
                <tbody>
                  {this.state.tableStyles.map((row) => (
                    
                    <tr key={row.id}  >
                      <td>{row.id}</td>
                      <td>
                        <img
                          className="img-rounded"
                          src={row.picture}
                          alt=""
                          height="50"
                        />
                      </td>
                      <td>
                        {row.description}
                        {row.label && (
                          <div>
                            <Badge color={row.label.colorClass}>
                              {row.label.text}
                            </Badge>
                          </div>
                        )}
                      </td>
                      <td>
                        <p className="mb-0">
                          <small>
                            Città:
                            <span className="text-muted fw-semi-bold">
                              &nbsp; {row.info.citta}
                            </span>
                          </small>
                        </p>
                        <p>
                          <small>
                            Provincia:
                            <span className="text-muted fw-semi-bold">
                              &nbsp; {row.info.provincia}
                            </span>
                          </small>
                        </p>
                      </td>
                      <td className="text-muted">{row.DataInserimento}</td>
                      <td className="text-muted">{row.Cap}</td>
                      <td className="width-150">
                        <Button color="default" className="mr-2" size="sm" onClick={() => this.getEventEditUser(row.id)}>
                    Modifica
                  </Button>
                        
                      </td>
                    </tr>
                  ))}
                </tbody>
              </Table>
              <div className="clearfix">
                <div className="float-right">
                  <Button color="default" className="mr-2" size="sm">
                    Refresh...
                  </Button>
                  <UncontrolledButtonDropdown>
                    <DropdownToggle
                      color="inverse"
                      className="mr-xs"
                      size="sm"
                      caret
                    >
                      Nuovo Cliente
                    </DropdownToggle>
                    <DropdownMenu>
                      <DropdownItem>Inserisci ragione sociale</DropdownItem>
                      <Input
                id="search-input"
                className="input-transparent"
                placeholder="ragionesociale"
                type='text'
  name='ragionesociale'
  onChange={this.newuser.bind(this)}
              />

                    </DropdownMenu>
                  </UncontrolledButtonDropdown>
                </div>
                <p></p>
              </div>
            </Widget>
          </Col>
        </Row>

                          </div>
    );
  }
}

export default Static;

Answer 1

如果您使用 react-router，您还可以使用 utils 函数进行导航。
https://reactrouter.com/web/api/Router/history-object

要访问历史对象，您可以使用钩子 useHistory 或 HOC withRouter。
因为您使用的是 React 类组件，所以您必须使用 withRouter。

class MyComponent extends React.Component {

   navigate = () => {
     const { history } = this.props
     history.push('/hello')
   }
   
   render() {
     return (
       <div>
         <button onClick={this.navigate}></button>
       </div>
    )
  } 
}

export default withRouter(MyComponent)

反应路由器的重定向不正确

1 个答案: