几次导航后反应路由器dom白屏

时间：2020-04-25 21:05:03

标签： reactjs react-router react-router-dom

我正在研究ReactJS项目。我在这里遇到react-router-dom的问题。经过几次导航后，我的屏幕变白了。

以下是我的Router.js文件：

// Routes.js
import React from 'react';
import { Switch, Route } from 'react-router-dom';

import Category from "./Category";
import ProductDetails from "./ProductDetails";
import Contact from "./Contact";
import Login from "./Login";
import Register from "./Register";
import Checkout from "./Checkout";
import Cart from "./Cart";
import Confirm from "./Confirm";
import Home from "./Home";
import UserDashboard from './UserDashboard';

const Routes = () => {
  return (
    <>
      <Route path="/" exact component={Category} />
      <Route path="/dash" exact component={UserDashboard} />
      <Route path="/home" exact component={Home} />
      <Route path="/product" exact component={ProductDetails} />
      <Route path="/cart" exact component={Cart} />
      <Route path="/checkout" exact component={Checkout}/>
      <Route path="/confirm" exact component={Confirm}/>
      <Route path="/login" exact component={Login} />
      <Route path="/register" exact component={Register} />
      <Route path="/contact" exact component={Contact} />
    </>
  )
}

export default Routes

以下是我的App.js文件：

// App.js
import React, { useEffect } from "react";
import "./App.css";

import { BrowserRouter as Router} from "react-router-dom";
import Routes from "./pages/Routes";

const App = () => {

  return (
    <Router>
      <Routes />
    </Router>
  );
};

export default App;

类别部分的可疑代码：

// Category.js
import React, { useState, useEffect } from "react";
import Header from "../components/Header";
import BannerText from "../components/BannerText";
import Footer from "../components/Footer";
import Axios from "axios";
import ProductCard from "../components/ProductCard";
import { Link } from "react-router-dom";

const Category = () => {
  const [next, setNext] = useState("");
  const [prev, setPrev] = useState("");
  const [pagdata, setPagdata] = useState([]);
  const [purl, setPurl] = useState([]);
  const [xurl, setXurl] = useState("http://192.168.43.34:8000/api/products/");
  const [imgurl, setImgurl] = useState([]);
  const [caturl, setCaturl] = useState(
    "http://192.168.43.34:8000/api/categories/"
  );
  const [category, setCategory] = useState([]);
  const [catsurl, setCatsurl] = useState([]);

  // Products
  useEffect(() => {
    Axios.get(xurl).then((response) => {
      console.log(response.data.previous + "from category");
      return [
        setPrev(response.data.previous),
        setNext(response.data.next),
        setPagdata(response.data.results),
        setPurl(response.data.results.url),
      ];
    });
    // Browse Categories List
    Axios.get(caturl).then((response) => {
      console.log(response.data.results.children);
      return [setCategory(response.data.results), console.log(category)];
    });
    // Sub Categories List
    Axios.get(caturl).then((response) => {
      console.log(response.data.results);
      return [setCategory(response.data.results), console.log(category)];
    });
  }, [xurl]);

  return (
    <div>
      <Header />
      <BannerText title="Product List" />

      <div className="container">
        <div className="row">
          <div className="col-xl-3 col-lg-4 col-md-5">
            <div className="sidebar-categories">
              <div className="head">Browse Categories</div>
              <ul className="main-categories">
                {category.map((category) => {
                  return (
                    <Link to={""}>
                      <li className="main-nav-list">
                        <a
                          data-toggle="collapse"
                          href="#fruitsVegetable"
                          aria-expanded="false"
                          aria-controls="fruitsVegetable"
                        >
                          <span className="lnr lnr-arrow-right"></span>
                          {category.breadcrumbs}
                          <span className="number">(53)</span>
                        </a>
                      </li>
                    </Link>
                  );
                })}
              </ul>
            </div>
          </div>
          <div className="col-xl-9 col-lg-8 col-md-7">
            {/* Start Filter Bar */}
            <div className="filter-bar d-flex flex-wrap align-items-center">
              <div className="sorting"></div>
              <div className="sorting mr-auto">
                <div className="head has-text-white">Browse Categories</div>
                {/* <select>
                                            <option value="1">Show 12</option>
                                            <option value="1">Show 12</option>
                                            <option value="1">Show 12</option>
                                        </select> */}
              </div>
              <div className="pagination">
                <a
                  href="#/"
                  className="prev-arrow"
                  onClick={() => setXurl(prev)}
                >
                  <i className="fa fa-long-arrow-left" aria-hidden="true"></i>
                </a>
                {/* <a href="#/" className="prev-arrow" onClick={()=>{onClickLeft();}}><i className="fa fa-long-arrow-left" aria-hidden="true"></i></a> */}
                <a href="#/"></a>
                <a href="#/"></a>
                <a href="#/"></a>
                <a href="#/"></a>
                {/* <a href="#/" className="next-arrow" onClick={()=>setXurl(next)}><i className="fa fa-long-arrow-right" aria-hidden="true"></i></a> */}
                <a
                  href="#/"
                  className="next-arrow"
                  onClick={() => setXurl(next)}
                >
                  <i className="fa fa-long-arrow-right" aria-hidden="true"></i>
                </a>
              </div>
            </div>
            {/* End Filter Bar */}
            {/* Start Best Seller */}

            {/* End Best Seller */}
            <section className="lattest-product-area pb-40 category-list">
              <div className="row">
                {pagdata.map((pagdata) => {
                  return (
                    <ProductCard
                      title={pagdata.title}
                      realurl={purl}
                      imageurl={pagdata.url}
                    />
                  );
                })}
              </div>
            </section>
            {/* Start Filter Bar */}
            <div className="filter-bar d-flex flex-wrap align-items-center">
              <div className="sorting mr-auto"></div>
              <div className="pagination">
                <a href="#/" className="prev-arrow">
                  <i className="fa fa-long-arrow-left" aria-hidden="true"></i>
                </a>
                <a href="#/"></a>
                <a href="#/"></a>
                <a href="#/"></a>
                <a href="#/"></a>
                <a href="#/" className="next-arrow">
                  <i className="fa fa-long-arrow-right" aria-hidden="true"></i>
                </a>
              </div>
            </div>

            {/* End Filter Bar */}
          </div>
        </div>
      </div>

      {/* <DealOf /> */}
      <Footer />
    </div>
  );
};

export default Category;

当我尝试从“ /”导航到任何其他路线时，只会出现白屏。它有一些“精确”的方法。请让我知道为什么这种确切的方法会引起问题

1 个答案:

答案 0 :(得分：0)

要在ReactJS SPA（单页应用程序）上进行路由，您应该使用Link的{​​{1}}组件，但是在代码中，我只是看到您使用锚点react-router-dom标签。仅存在一个<a>标签，其<Link>属性是一个空字符串！注意代码的这一部分：

to

实际上，您应该在此处传递以下路线名称之一，如以下代码所示：

  {category.map((category) => {
    return (
      <Link to={""}> // <== here!!!

此外，在ReactJs上要可爱，不需要在JSX上返回，像这样编写上面的代码：

  {category.map((category) => {
    return (
      <Link to="/dash"> // <== here!!!

其他 {category.map((category) => ( // <== return JSX like it <Link to="/dash"> 标签只是导致您的应用刷新，因此带有内部路由并带有锚标签的应用仍不是SPA。使用<a href="#/"中的Link。

此外，您应用程序中的react-router-dom组件位于Link函数下。因此您的map中可能包含相关的路线名称。另外，我建议您不要对category函数中的array.map及其项使用相同的名称，如下所示：

map

希望这些建议对您有所帮助。

相关问题
最新问题