React router dom white screen after a few navigations

Question

I am working on a ReactJS project. Here I am facing an issue with react-router-dom. After a few navigations, my screen whites out.

Following is my Router.js file:

// 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 (
    <>
      
      
      
      
      
      
      
      
      
      
    
  )
}

export default Routes

Following is my App.js file:

// 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 (
    
      
    
  );
};

export default App;

Suspected code of category section:

// 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 (
    
      
      

      
        
          
            
              Browse Categories
              
                {category.map((category) => {
                  return (
                    
                      
                        
                          
                          {category.breadcrumbs}
                          (53)
                        
                      
                    
                  );
                })}
              
            
          
          
            {/* Start Filter Bar */}
            
              
              
                Browse Categories
                {/*  */}
              
              
                 setXurl(prev)}
                >
                  
                
                {/* {onClickLeft();}}> */}
                
                
                
                
                {/* setXurl(next)}> */}
                 setXurl(next)}
                >
                  
                
              
            
            {/* End Filter Bar */}
            {/* Start Best Seller */}

            {/* End Best Seller */}
            
              
                {pagdata.map((pagdata) => {
                  return (
                    
                  );
                })}
              
            
            {/* Start Filter Bar */}
            
              
              
                
                  
                
                
                
                
                
                
                  
                
              
            

            {/* End Filter Bar */}
          
        
      

      {/*  */}
      
    
  );
};

export default Category;

I am only getting a white screen when I try to navigate from '/' to any other route. It has some 'exact' method. Kindly let me know why that exact method is making issues

AmerllicA · Accepted Answer

For routing on a ReactJS SPA (Single Page Application) you should use the Link component of react-router-dom but in your code I just see you use anchor tags. there is an only tag that its to prop is an empty string! pay attention to this part of your code:

  {category.map((category) => {
    return (
       // <== here!!!

Actually, you should pass one of the route names here like below code:

  {category.map((category) => {
    return (
       // <== here!!!

Furthermore, be cute on ReactJs, there is no need to return on JSX, write the above code like it:

  {category.map((category) => ( // <== return JSX like it

Other the tags just caused a refresh on your app, hence your app with internal routing with anchor tag is not still a SPA. use Link of react-router-dom.



Also, the Link component in your application is under a map function. so your category maybe have related route name in it. additionally, I suggest you do not use same name for array.map and its items inside the map function, write like below:

category.map( item =>


I hope these suggestions help you.

React router dom white screen after a few navigations

Answers (1)

Related Questions