Question 134903 in Visual Studio Code Question posted in
View the official documentation.

Visual Studio Code – React js Electron – loading indefinitely

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

Tags:

2

Answers


  1. 0

    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!

    Login or Signup to reply.
  2. 0

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

    replace below code

    case "/":
      Component = <App />

    with

    case "/":
      Component = <div>Component</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search