ReactJS с использованием ссылки / маршрута при нажатии кнопки поиска

ProgramBox

ReactJS с использованием ссылки / маршрута при нажатии кнопки поиска

Post author:admin
Запись опубликована:26 февраля, 2023
Post category:Вопросы по программированию

#reactjs #react-router

#reactjs #реагирующий маршрутизатор

Вопрос:

Я создал страницу хранения для результатов поиска:

 import React from "react";

class SearchResults extends React.PureComponent {
  render() {
    return (
      <React.Fragment>
        <h1 style={{ marginLeft: "20px" }}>
        Search result
        </h1>
      </React.Fragment>
    );
  }
}
export default SearchResults;

Теперь я определил функцию

 searchById = (Id) => {
    console.log("On Id Search=", Id);
    this.setState({Id: this.Id});
    // <Link
    //   to={{
    //     pathname: "/resultForSearchWitId",
    //     search: "?Id=" Id,
    //     hash: "#searchResults",
    //     state: {fromDashboard: true}
    //   }}
    // return <Link to="#/searchResults" />;
    // return <Redirect to="/" />;
    console.log(this.props.history);
   this.props.history.pathname = 'searchResults';
  };

В идеале я хотел бы использовать ссылку для маршрутизации содержимого результата для загрузки на searchResuts.js досье. Я определил маршрут как

       <Route path="/searchResults" component={SearchResults} />

При запуске приложения у меня есть следующий маршрут

       <Route exact path="/" component={Dashboard} />

Который работает, и все пункты меню также хорошо работают с приведенным выше кодом, но мой JS-файл результатов поиска никогда не вызывается.

Чего мне не хватает? Я использую ant.design и ReactJS для своего меню и дизайна ввода.

Даже this.props.history.pathname = 'searchResults'; не работает. Текущая страница, предназначенная для хранения, не загружается.

Обновление: код заглушки маршрутизатора

 <Router>
    <Layout style={{ minHeight: "100vh" }}>
      <Sider
        collapsible
        collapsed={this.state.collapsed}
        onCollapse={this.onCollapse}
      >
        <Search
          placeholder="Search by ID"
          onSearch={this.searchById}
          style={{ marginTop: "10px" }}
        />

        <Menu theme="dark" defaultSelectedKeys={["1"]} mode="inline">
          <SubMenu
            key="0"
            title={
              <span>
                <Icon type="appstore" />
                <span>Test App</span>
              </span>
            }
          >
            <Menu.Item key="0-1">
              <span>Dummy Link 1</span>
              <Link to="/dummyLink1" />
            </Menu.Item>
            <Menu.Item key="0-2">
              <span>Dummy Link 2</span>
              <Link to="/dummpyLink2" />
            </Menu.Item>
          </SubMenu>
        </Menu>
      </Sider>
      <Layout>
        <Header style={{ background: "#fff", padding: 0, paddingLeft: 16 }}>
          <Icon
            className="trigger"
            type={this.state.collapsed ? "menu-unfold" : "menu-fold"}
            style={{ cursor: "pointer" }}
            onClick={this.toggle}
          />
        </Header>
        <Content
          style={{
            margin: "24px 16px",
            padding: 24,
            background: "#fff",
            minHeight: 280,
          }}
        >
          <Route exact path="/" component={Dashboard} />
          <Route path="/searchResults" component={SearchResults} />
          <Route path="/dummpyLink1" component={DummyLink1} />
          <Route path="/dummpyLink2" component={DummyLink2} />
        </Content>
      </Layout>
    </Layout>
  </Router>

1. Вы пытаетесь это сделать this.props.history.push("/searchResults"); ? Это с некоторым состоянием маршрута, которое должно быть получено SearchResults компонентом?

2. Вы смешиваете объекты местоположения и истории, попробуйте использовать методы history.push или history.replace .

3. Если после использования push() метода истории маршрут по-прежнему изменяется некорректно, а главная страница панели мониторинга отображается по-прежнему, я думаю, что проблема может быть внутри компонента, в котором вы определили все маршруты, и это приводит к неправильному переключению маршрутов.

4. Возможно, я унаследовал код 4 дня назад, и сегодня я столкнулся с этой проблемой, перепробовал все комбинации, пока ничего не работает. Отсюда и просьба о помощи здесь!

Ответ №1:

Если searchById функция перенаправляет на страницу результатов seaech, вам нужно добавить в нее следующую строку:

this.props.history.push('/searchResults)

1. Когда я делаю это @Saba, проблема в том, что мой URL-адрес — link localhost:8080 / dashboard , нажатие сделает его localhost: 8080 / dasboard #/ SearchResults , поэтому он не загружает страницу.

2. Как вы определили маршруты проекта? Было бы хорошо, если бы мы могли видеть, как вы написали компоненты, которые содержат все маршрутизации

3. импортируйте результаты поиска из «../../../containers/Dashboard/SearchResults»; <Путь маршрута=»/SearchResults» component={SearchResults} /> Обычно вызывается как <Ссылка на=»/searchRsults»/>

4. Нет, я спрашиваю о том, как вы определяете маршруты. Например: <BroweserRouter><Switch>....</Switch></BroweserRouter>

5.@Vivek Пожалуйста, проверьте и убедитесь, что вы делаете push("/searchResults") , а не push("#/searchResults") нет.

Ответ №2:

используйте push() метод, и вы также можете передавать параметры

 searchById = (Id) => {
    console.log("On Id Search=", Id);
    this.setState({Id: this.Id});
   this.props.history.push({
     pathname: "/searchResults",
     search: "?Id=" Id,
     state: {fromDashboard: true}
   });
  };

Ответ №3:

Если вы пытаетесь в обязательном порядке перейти к своему SearchResults компоненту страницы, вам следует выполнить нажатие истории на путь и передать любые данные в состоянии маршрута.

 searchById = (Id) => {
  console.log("On Id Search=", Id);
  this.setState({Id: this.Id});
  this.props.history.push({
    pathname: '/searchResults',
    state: {
      searchResults: /* the search result data */,
    },
  });
};

В получающем компоненте маршрута доступ к состоянию маршрута из location prop.

 class SearchResults extends React.PureComponent {
  render() {
    const { location: { state: { searchResults } } } = this.props;

    return (
      <React.Fragment>
        <h1 style={{ marginLeft: "20px" }}>
        Search result
        </h1>
        {searchResults.map(...)}
      </React.Fragment>
    );
  }
}