1

I have my app on localhost:3000, and having the code below in App.js (create-react-app) , According to me on the homepage of the App only 'Burger' component should render and 'Order' component should open in a different page on click of a button that i placed somewhere in the 'Burger' Component, but what's happening is that contents of the 'Order' component are getting rendered on the homepage as well, I want only 'Burger' Component contents to be on the homepage.

import React from "react";
import "./App.css";
import Burger from "./components/Burger/Burger";
import {
  Redirect,
  Switch,
  BrowserRouter as Router,
  Route,
} from "react-router-dom";
import Order from "./components/Order/Order";

function App() {
  return (
    <div className="App">
      <Switch>
        <Route path="/" component={Burger} exact />
        <Route path="/order" component={Order} />
      </Switch>
    </div>
  );
}

export default App;
Lets Code
  • 11
  • 3
  • Can you provide some code from the `Burger` file? – Jeff Berlin Oct 03 '20 at 15:26
  • @JeffBerlin here : https://paste.ubuntu.com/p/sM3XP4RJd6/ – Lets Code Oct 03 '20 at 15:31
  • 1
    on line 243 you have Order component inside the Burger. That's why it's being rendered – szczocik Oct 03 '20 at 15:34
  • Put Burger component below order component – Fahad Shinwari Oct 03 '20 at 15:42
  • @szczocik it's inside a fragment, i think it won't work if i put it outside the fragment. – Lets Code Oct 03 '20 at 15:47
  • @Fahad done that, but it's not working – Lets Code Oct 03 '20 at 15:47
  • @LetsCode, it is being rendered when you render a Burger component because you have the Order component inside the Burger component. If you remove it completely from Burger, it won't be rendered. I'm not sure why you need to have the Order component inside the Burger but if you include it there, it will be rendered – szczocik Oct 03 '20 at 15:49
  • @szczocik i placed the Order inside Burger because i am passing values from Burger to Order via props , you can see Order.js here : https://paste.ubuntu.com/p/ZxzK8YcD9H/ – Lets Code Oct 03 '20 at 15:52
  • If you don't want them rendered together, then you will have to separate them, or use some conditional render. If you are passing props from Burger to Order, then perhaps you should look at global state management like Redux, so you don't have to render them both at the same time – szczocik Oct 03 '20 at 15:58
  • @szczocik , i am not sure how to separate them ( I am new to ReactJS) , i was simply trying to pass from Burger to Order. – Lets Code Oct 03 '20 at 16:01
  • You can have a read about Redux here https://redux.js.org/faq/organizing-state So you would have the Burger component dispatching actions to the state and the Order component, if you navigate to that route, could read from the state. – szczocik Oct 03 '20 at 16:06
  • Maybe here you can find an answer https://stackoverflow.com/questions/30202755/react-router-open-link-in-new-tab – lissettdm Oct 03 '20 at 16:28
  • Where excactly do you wrap the `Router` component? – adir abargil Oct 03 '20 at 16:52
  • @adirabargil in the index.js – Lets Code Oct 03 '20 at 17:20
  • Then code sand box because i cant see any problem.. – adir abargil Oct 03 '20 at 17:22

0 Answers0