React js Electron - loading indefinitely-CodePudding

my localhost window is loading indefinitely, if i dont put the return right next to the function App() {

but since i want to put stuff inbetween, it completly shuts down. Why is this the case? Please help

/* eslint-disable default-case */
import './App.css';
import Navbar from './Navbar';
import About from './pages/About';
import Pricing from './pages/Pricing';

function App() {
  let Component
  switch (window.location.pathname) {
    case "/":
      Component = <App />
      break
    case "/pricing":
      Component = <Pricing />
      break
    case "/about":
      Component = <About />
      break
  }
  return (<><Navbar />{Component}</>)
}

export default App;

if i put only

/* eslint-disable default-case */
import './App.css';
import Navbar from './Navbar';
import About from './pages/About';
import Pricing from './pages/Pricing';

function App() {return (<><Navbar /></>)
}

export default App;

then it works. It works fine if i remove the {Component} at the end.

EDIT: FOUND THE PROBLEM. I called the wrong component. Dumb mistake of mine. Ty for your time

CodePudding user response：

Try like this:

/* eslint-disable default-case */
import './App.css';
import Navbar from './Navbar';
import About from './pages/About';
import Pricing from './pages/Pricing';

function App() {
  let Component
  switch (window.location.pathname) {
    case "/":
      Component = App
      break
    case "/pricing":
      Component = Pricing
      break
    case "/about":
      Component = About
      break
  }
  return (<><Navbar /><Component /></>)
}

export default App;

Not an expert in React but I think you cannot use <Pricing />, for example, outside of the scope of the return. So just do it like so Component = Pricing and call the the component as <Component/> inside the scope of the return.

I have a similar code that works and goes like this:

//Native Blocks
import Paragraph from '/components/blocks/native/paragraph';
import List from '/components/blocks/native/list';
import Quote from '/components/blocks/native/quote';
import CustomHTML from '/components/blocks/native/custom-html';
import Youtube from '/components/blocks/native/youtube';
import Twitter from '/components/blocks/native/twitter';
import Image from '/components/blocks/native/image';
import Heading from '/components/blocks/native/heading';
import Table from '/components/blocks/native/table';

//Full-Witdth Page Blocks
import InfoBlock from '/components/blocks/custom-page/info-block';
import InfoBlockCards from '/components/blocks/custom-page/info-block-cards';
import InfoBlockExpandable from '/components/blocks/custom-page/info-block-expandable';
import NewsSlider from '/components/blocks/custom-page/news-slider';
import TopReview from '/components/blocks/custom-page/top-review';

//Common Blocks
import TopBanner from '/components/blocks/common/top-banner';

const components = {
  //Native
  Paragraph: Paragraph,
  List: List,
  Quote: Quote,
  CustomHTML: CustomHTML,
  Youtube: Youtube,
  Twitter: Twitter,
  Image: Image,
  Heading: Heading,
  Table: Table,

  //Full-width
  TopBanner: TopBanner,
  InfoBlock: InfoBlock,
  InfoBlockCards: InfoBlockCards,
  InfoBlockExpandable: InfoBlockExpandable,
  NewsSlider: NewsSlider,
  TopReview: TopReview
}

function BlockParser(props) {
    const TargetComponent = components[props.componentName];

    if (TargetComponent != null) {
      return <TargetComponent />;
    }else {
      return (process.env.NODE_ENV == 'development') ? "BLOCK NOT FOUND!" : '';
    }
}

Hope this helps!

CodePudding user response：

In you code, you are calling App component recursively try below solution

replace below code

case "/":
      Component = <App />

with

case "/":
      Component = <div>Component</div>