没有路线匹配位置“/”，并且搜索栏、分页和过滤器不显示。 React.js

Question

当我添加搜索栏逻辑、分页和过滤器时，我收到错误“没有与位置“/”匹配的路线”。我正在使用 Postman 来测试逻辑是否正确并且有效，但由于某种原因，元素没有显示。我认为错误可能出在路由中，但对我来说看起来不错。

App.js，其中路由是：

import Login from './components/user/Login';

const alertOptions = {
  position: positions.BOTTOM_CENTER,
  timeout: 5000,
  offset: '30px',
  transition: transitions.SCALE
};

function App() {
  return (
    <AlertProvider template={AlertTemplate} {...alertOptions}>
      <Router>
        <div className="App">
          <Header />
          <div className="container container-fluid">
            <Routes>
              <Route path="/" element={<Home />} exact />
              <Route path="/search/:keyword" element={<Home />} />
              <Route path="/product/:id" element={<ProductDetails />} exact />
              <Route path="/login" element={<Login />} />
            </Routes>
          </div>
          <Footer />
        </div>
      </Router>
    </AlertProvider>
  );
}

export default App;

Home.js 组件，其中应该显示过滤器和分页：

import React, { Fragment, useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import Pagination from "react-js-pagination";
import Slider from "rc-slider";
import "rc-slider/assets/index.css";
import MetaData from "./layout/MetaData";
import Product from "./product/Product";
import Loader from "./layout/Loader";
import { useDispatch, useSelector } from "react-redux";
import { getProducts } from "../actions/productActions";

const Home = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const [price, setPrice] = useState([0, 1000]);
  const { keyword } = useParams();
  const dispatch = useDispatch();
  const { loading, products, error, productsCount, resPerPage } = useSelector(
    (state) => state.products
  );

  useEffect(() => {
    if (error) {
      return alert.error(error);
    }

    dispatch(getProducts(keyword, currentPage, price));
  }, [dispatch, error, keyword, currentPage, price]);

  function setCurrentPageNo(pageNumber) {
    setCurrentPage(pageNumber);
  }

  return (
    <Fragment>
      {loading ? (
        <Loader />
      ) : (
        <Fragment>
          <MetaData title={"Buy the best plugins for FL Studio!"} />
          <h1 id="products-heading"></h1>
          <section id="products" className="container mt-5">
            <div className="row">
              {keyword ? (
                <Fragment>
                  <div className="col-6 col-md-3 mt-5 mb-5">
                    <div className="px-5">
                      {}
                      <Slider.Range
                        marks={{
                          0: "0",
                          1000: "1000",
                        }}
                        min={0}
                        max={1000}
                        defaultValue={[0, 1000]}
                        tipFormater={(value) => value}
                        tipProps={{
                          placement: "top",
                          visible: true,
                        }}
                        value={price}
                        onChange={(price) => setPrice(price)}
                      />
                    </div>
                  </div>
                  <div className="col-6 col-md-9">
                    <div className="row">
                      {products.map((product) => (
                        <Product key={product._id} product={product} col={4}/>
                      ))}
                    </div>
                  </div>
                </Fragment>
              ) : (
                products.map((product) => (
                  <Product key={product._id} product={product} col={3}/>
                ))
              )}
            </div>
          </section>
          {resPerPage <= currentPage && (
            <div className="d-flex justify-content-center mt-5">
              <Pagination
                activePage={currentPage}
                itemsCountPerPage={resPerPage}
                totalItemsCount={productsCount}
                onChange={setCurrentPageNo}
                nextPageText={"Next"}
                prevPageText={"Previous"}
                firstPageText={"First"}
                lastPageText={"Last"}
                itemClass="page-item"
                linkClass="page-link"
              />
            </div>
          )}
        </Fragment>
      )}
    </Fragment>
  );
};

export default Home;

从productActions.js获取产品：

export const getProducts = (keyword = '',currentPage = 1, price) => async (dispatch) => {
    try {
        dispatch({ type: ALL_PRODUCTS_REQUEST });

        let link = `/api/v1/products?keyword=${keyword}&page=${currentPage}&price[lte]=${price[1]}&price[gte]=${price[0]}`
        const {data} = await axios.get(link);

        dispatch({
            type: ALL_PRODUCTS_SUCCESS,
            payload: data
        });
    } catch (error) {
        dispatch({
            type: ALL_PRODUCTS_FAIL,
            payload: error.response.data.message
        });
    }
};

搜索栏的Search.js：

import React, {useState} from 'react'

const Search = ({history}) => {
    const [keyword, setKeyword] = useState('')
    const searchHandler = (e) => {
        e.preventDefault();
        
        if(keyword.trim()){
            history.pushState(`/search/${keyword}`)
        } else {
            history.pushState('/')
        }
    }

  return (
    <form onSubmit={searchHandler}>
      <div className="input-group">
            <input
              type="text"
              id="search_field"
              className="form-control"
              placeholder="Пакети, инструментали, плъгини..."
              onChange={(e) => setKeyword(e.target.value)}
            />
            <div className="input-group-append">
              <button id="search_btn" className="btn">
                <i className="fa fa-search" aria-hidden="true"></i>
              </button>
            </div>
          </div>
    </form>
  )
}
export default Search

还有 Header.js，搜索栏位于：

import React, { Fragment } from "react";
import Search from './Search';
import { Link , Routes, Route} from "react-router-dom";
import "../../App.css";

const Header = ({product}) => {
  return (
    <Fragment>
      <nav className="navbar row">
        <div className="col-12 col-md-3">
          <Link to={'/'}>
            <div className="navbar-brand">
              <img
                src="/images/Logo.png"
                style={{ width: "100px", height: "100px" }}
                alt=""
              />
            </div>
          </Link>
        </div>

        <div className="col-12 col-md-6 mt-2 mt-md-0">
        <Routes>
            <Route render={({history}) => <Search history={history} />} />
        </Routes>
        </div>

        <div className="col-12 col-md-3 mt-4 mt-md-0 text-center">
          <Link to="/login" className="btn ml-4" id="login_btn">
            Регистрация
          </Link>
          <span id="cart" className="ml-3">
            Количка
          </span>
          <span className="ml-1" id="cart_count">
            2
          </span>
        </div>
      </nav>
    </Fragment>
  );
};

export default Header;

我希望这段代码足够了。预先感谢您！

Answer 1

尝试改变

<Route path="/" element={<Home />} exact />

到

<Route path="/*" element={<Home />} exact />