如何摆脱这个？来自 url

Question

我正在制作一个 React 应用程序，每当我在主页上搜索某些东西（例如猫）时，url 会更改为 search/cat 并且前进，后退按钮正常工作并帮助我在主页和猫搜索页面之间切换...但是当我在（主页->猫）之后再次搜索某些东西（例如老鼠）时，所以 url 变为 search/rat？现在，当我按下后退按钮时，url 变为 search/rat 并且我在同一页面上，然后如果我再次按下后退按钮，url 变为 search/cat 但是页面仍然有 rat 搜索的结果，如果我再次按回，主页出现..为什么会这样？我认为这是因为？出现在 url 的末尾。请帮助

搜索猫后寻找老鼠后按下后退按钮后按下后退按钮后按下后退按钮后

这是搜索栏的代码

import React, { Component } from "react";
import "./styles/searchBar.scss";
import "font-awesome/css/font-awesome.min.css";
import { withRouter } from "react-router-dom";
import SearchForm from "./SearchForm";
import { connect } from "react-redux";
import { fetchRandomPhotos } from "../redux/actions/randomPhotoAction";
class SearchBar extends Component {
  state = {
    searchQuery: "",
  };

  componentDidMount() {
    this.props.fetchRandomPhotos();
  }

  handleChange = (event) => {
    this.setState({ searchQuery: event.target.value });
  };

  handleSubmit = (event) => {
    //event.preventDefault();
    this.props.history.push(`/search/${this.state.searchQuery}`);
  };

  handleProfile = () => {
    this.props.history.push(`/public/${this.props.photo.user.username}`);
  };

  render() {
    const { photo } = this.props;
    return !photo ? (
      <div className="search-bar-container">
        <div className="search-bar-area">
          <div className="about-foto-fab">
            <h1>Foto-Fab</h1>
            <p>The internet's source of freely-usable images.</p>
            <p>Powered by creator everywhere</p>
          </div>
          <SearchForm
            onSubmit={this.handleSubmit}
            onChange={this.handleChange}
          />
        </div>
      </div>
    ) : (
      <div
        className="search-bar-container"
        style={{ backgroundImage: `url("${photo.urls.full}")` }}
      >
        <div className="black-layer"></div>
        <div className="search-bar-area">
          <div className="about-foto-fab">
            <h1>Foto-Fab</h1>
            <p>The internet's source of freely-usable images.</p>
            <p>Powered by creator everywhere</p>
          </div>
          <SearchForm
            onSubmit={this.handleSubmit}
            onChange={this.handleChange}
          />
        </div>

        <div className="picture-info">
          <div className="photographer">
            <p onClick={this.handleProfile}>
              <strong>Photo</strong> by {""}
              <strong>{photo.user.name}</strong>
            </p>
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    photo: state.randomPhotoState.photo,
  };
};

export default connect(mapStateToProps, { fetchRandomPhotos })(
  withRouter(SearchBar)
);

这是 App.js

import React from "react";
import Navbar from "./components/Navbar";
import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom";
import Home from "./pages/Home";
import LoginPage from "./pages/LoginPage";
import ProfilePage from "./pages/ProfilePage";
import SearchPage from "./pages/SearchPage";
import PublicUserProfilePage from "./pages/publicUserProfilePage";
import MobileNavigation from "./components/MobileNavigation";
import AboutPage from "./pages/AboutPage";


function App() {
  return (
    <BrowserRouter>
      <Navbar />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/login" component={LoginPage} />
          <Route exact path="/profile" component={ProfilePage} />
          <Route exact path="/search/:searchQuery" component={SearchPage} />
          <Route exact path="/about" component={AboutPage} />
          <Route
            exact
            path="/public/:username"
            component={PublicUserProfilePage}
          />
          <Redirect to="/" />
        </Switch>
      <MobileNavigation />
    </BrowserRouter>
  );
}

export default App;

搜索表单组件

import React, { Component } from "react";

export class SearchForm extends Component {
  render() {
    const { onSubmit, onChange } = this.props;
    return (
      <form className="search-form" onSubmit={onSubmit}>
        <input
          type="text"
          placeholder="Search free high-resolution photos"
          onChange={onChange}
        />
        <button type="submit">
          <i className="fa fa-search"></i>
        </button>
      </form>
    );
  }
}

export default SearchForm;

Answer 1

import React, { Component } from "react";
import "./styles/searchBar.scss";
import "font-awesome/css/font-awesome.min.css";
import { withRouter } from "react-router-dom";
import SearchForm from "./SearchForm";
import { connect } from "react-redux";
import { fetchRandomPhotos } from "../redux/actions/randomPhotoAction";
class SearchBar extends Component {
  state = {
    searchQuery: "",
  };

  componentDidMount() {
    this.props.fetchRandomPhotos();
  }

  handleChange = (event) => {
    this.setState({ searchQuery: event.target.value });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    if (this.state.searchQuery) {
      this.props.history.push(`/search/${this.state.searchQuery}`);
    }
  };

  handleProfile = () => {
    this.props.history.push(`/public/${this.props.photo.user.username}`);
  };

  render() {
    const { photo } = this.props;
    return !photo ? (
      <div className="search-bar-container">
        <div className="search-bar-area">
          <div className="about-foto-fab">
            <h1>Foto-Fab</h1>
            <p>The internet's source of freely-usable images.</p>
            <p>Powered by creator everywhere</p>
          </div>
          <SearchForm
            onSubmit={this.handleSubmit}
            onChange={this.handleChange}
          />
        </div>
      </div>
    ) : (
      <div
        className="search-bar-container"
        style={{ backgroundImage: `url("${photo.urls.full}")` }}
      >
        <div className="black-layer"></div>
        <div className="search-bar-area">
          <div className="about-foto-fab">
            <h1>Foto-Fab</h1>
            <p>The internet's source of freely-usable images.</p>
            <p>Powered by creator everywhere</p>
          </div>
          <SearchForm
            onSubmit={this.handleSubmit}
            onChange={this.handleChange}
          />
        </div>

        <div className="picture-info">
          <div className="photographer">
            <p onClick={this.handleProfile}>
              <strong>Photo</strong> by {""}
              <strong>{photo.user.name}</strong>
            </p>
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    photo: state.randomPhotoState.photo,
  };
};

export default connect(mapStateToProps, { fetchRandomPhotos })(
  withRouter(SearchBar)
);

如何摆脱这个？来自 url

How to get rid of this ? from the url

reactjs

url

url-rewriting

url-routing

react-router-dom