<LINK> reactjs更改URL但不呈现任何内容

Question

单击按钮后，我尝试渲染组件。我正在为我的项目使用React-Redux。单击该按钮时，它确实更改了网址，但未呈现任何内容。我什至在Router内的app.js中提到了Routes。代码在下面。

App.js

import React, { Component } from "react";
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect,
  withRouter
} from "react-router-dom";
import "./App.scss";
import PrivateRoute from "./PrivateRoute";
import { GlobalHistory } from "./_helpers/history";
import { Spinner } from "reactstrap";
import { userService } from "./_services/user.service";
import ProductDetails from "./website/dashboard/product-details/ProductDetails";
import Profile from "./website/dashboard/profile";
import DocRegister from "./views/Public/Login/docregister.jsx";
import { DoctorProductLocation } from "./locations";
import ContainingResult from "./website/dashboard/search/containing-results";

const loading = () => <Spinner color="success" />;
const DefaultLayout = React.lazy(() => import("./containers/DefaultLayout"));

// Pages
// const LandingPage = React.lazy(() => import('./views/Public/Landing/LandingPage'));
const Confirmation = React.lazy(() =>
  import("./views/Public/Register/Confirmation")
);
const SearchResult = React.lazy(() =>
  import("./views/Public/Search/SearchResult/SearchResult")
);
const Login = React.lazy(() => import("./views/Public/Login"));
const Logout = React.lazy(() => import("./views/Public/Login/Logout"));
const Register = React.lazy(() => import("./views/Public/Register/Register"));
const Page404 = React.lazy(() => import("./views/Public/Page404"));
const Page500 = React.lazy(() => import("./views/Public/Page500"));

// const Login = React.lazy(() => import('./views/Public/authentication/holder'));

class App extends Component {
  render() {
    return (
      <Router>
        <React.Suspense fallback={loading()}>
          <GlobalHistory />
          <Switch>
            <Route
              exact
              path="/login"
              render={props =>
                userService.isLoggedIn() ? (
                  <Redirect to="/" />
                ) : (
                  <Login {...props} />
                )
              }
            />
            <Route
              exact
              path="/logout"
              name="Logout Page"
              render={props => <Logout {...props} />}
            />
            {/* <Route exact path="/" name="Landing Page" render={props => <LandingPage {...props}/>} /> */}
            <Route
              exact
              path="/confirmation"
              render={props => <Confirmation {...props} />}
            />
            <Route
              exact
              path="/search-result"
              name="Search Result Page"
              render={props => <SearchResult {...props} />}
            />
            <Route
              exact
              path="/register"
              name="Register Page"
              render={props => <Register {...props} />}
            />
            <Route
              exact
              path="/404"
              name="Page 404"
              render={props => <Page404 {...props} />}
            />
            <Route
              exact
              path="/500"
              name="Page 500"
              render={props => <Page500 {...props} />}
            />
            <Route
              exact
              path="/dashboard/product/details"
              name="productDetails"
              render={props => <ProductDetails {...props} />}
            />
            <PrivateRoute
              path="/dashboard"
              name="Home"
              component={DefaultLayout}
            />
            <Route exact path="/profile" name="profile" component={Profile} />


//This is the route
            <Route
              exact
              path="/resultLoader"
              name="resultLoader"
              component={ContainingResult}
            />

            <Route
              exact
              path="/docregister"
              name="docregister"
              component={DocRegister}
            />

            <Redirect to="/dashboard" />
          </Switch>
        </React.Suspense>
      </Router>
    );
  }
}

export default App;

ContainingResult--Component

import React from "react";

import { connect } from "react-redux";
import SingleSearchResult from "./single-search-result";
import { results } from "../../../_actions/data/result";

import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
import Loader from "react-loader-spinner";
import { useSelector, useDispatch } from "react-redux";
import { paginate } from "../../../_actions/search.action";

import Pagination from "./pagination";
import "./test.css";
import SearchResult from "../../../views/Public/Search/SearchResult/SearchResult";
import SearchBar from "./search-bar";
import NavBar from "../navBar";
import Footer from "../footer";
import { fetchProducts, searchProduct } from "../../../_actions/search.action";

import Box from "@material-ui/core/Box";
// import SearchBar from "./search-bar";

class ContainingResult extends React.Component {
  render() {
    const { loading } = this.props;
    const str = this.props.location.search;
    const res = str.split("?q=");
    return (
      <React.Fragment>
        <NavBar></NavBar>
        <SearchBar></SearchBar>
        <div className="boxResult">
          <h1 style={{ color: "black" }}>
            {res}
            <hr style={{ backgroundColor: "black", width: "25%" }}></hr>
          </h1>
          <p style={{ color: "black" }}>Here is the teasing text...</p>
          <button
            className="btn btn-success"
            style={{ float: "right", backgroundColor: "#2d2762 " }}
          >
            See More
          </button>
        </div>
        <Footer></Footer>
      </React.Fragment>
    );
  }
}

const mapStateToProps = state => ({
  loading: state.product.loading
});

export default connect(mapStateToProps, { searchProduct, fetchProducts })(
  ContainingResult
);
// export default ContainingResult;

点击

搜索栏按钮组件

import React, { Component } from "react";
import React, { Component } from "react";
import { connect } from "react-redux";
import { Link, Route, Router } from "react-router-dom";
import {
  searchProduct,
  fetchProducts,
  setLoading,
  saveKeyword,
  filterProducts
} from "../../../_actions/search.action";
import Loader from "react-loader-spinner";
import { Collapse } from "reactstrap";
import Footer from "../footer";
import SingleSearch from "./single-search-result";

import { resultLoader } from "../../../locations";
class SearchBar extends Component {
  handleInputChange = e => {
    e.preventDefault();
    this.props.searchProduct(e.target.value);
  };

  onClick = e => {
    console.log("I am " + this.props.text);
    console.log("Search button clicked");
    this.props.saveKeyword(this.props.text);
    this.props.fetchProducts(this.props.text);
    // this.props.setLoading();
  };

  onClickFilter = e => {
    this.props.filterProducts(e.target.value);
  };

  render() {
    const { text, loading, filter } = this.props;

    return (
      <div>
        <div className="s130">
          <form
            onSubmit={e => {
              e.preventDefault();
            }}
          >
            <div className="inner-form">
              <div className="input-field first-wrap">
                <div className="svg-wrapper">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="auto"
                    height="auto"
                    viewBox="0 0 24 24"
                  >
                    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z">
                      {" "}
                    </path>
                  </svg>
                </div>
                <input
                  id="search"
                  type="text"
                  value={text}
                  placeholder="What are you looking for?"
                  onChange={this.handleInputChange}
                  ref={input => (this.textInput = input)}
                />
              </div>
              <div className="input-field second-wrap">
                <Link to={"/resultLoader"}>
                  <button
                    className="btn-search"
                    type="button"
                    onClick={this.onClick}
                  >
                    {" "}
                    SEARCH{" "}
                  </button>
                </Link>
              </div>
              {/* {`/dashboard/search?q=${text}`} */}

              {loading ? "Searching" : ""}

              {this.pr}
            </div>
          </form>
        </div>
        <br></br>
        <label className="" style={{ marginLeft: "30%" }}>
          <input
            type="radio"
            value="External"
            name="radio"
            onClick={this.onClickFilter}
          ></input>
          &nbsp; Web Search
        </label>

        <label className="" style={{ marginLeft: "5%" }}>
          <input
            type="radio"
            value="Internal"
            name="radio"
            onClick={this.onClickFilter}
          ></input>
          &nbsp; Product Search
        </label>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  text: state.product.text,
  loading: state.product.loading,
  filter: state.product.filter
});

export default connect(mapStateToProps, {
  searchProduct,
  fetchProducts,
  setLoading,
  saveKeyword,
  filterProducts
})(SearchBar);

Answer 1

似乎您似乎正在包装Link并将其转换为a标记，而button具有自己的onClick处理程序。

您应该删除Link并使用历史记录api，并在按钮history.push内使用onClick，因为可能无法执行按钮的onClick功能。

https://github.com/ReactTraining/history