CODEWITHSUNDEEP
javascriptreactjsreact-router-dom
MicSt
MicSt

Reputation: 197

React Router isn't rendering my component but does take me to new url path?

Can someone please show and explain where I am going wrong in here, I have used code structured like this in other projects and it has worked so not sure where the issue is.

When I click my button it changes to the new url path but does not render the new component.

Code Below:

App.js


import './App.css';

import LandingPage from '../src/Pages/LandingPage'

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import { MenuPage } from './Pages/MenuPage';



function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" component={LandingPage}/>
        <Route path="/menu" component={MenuPage}/>
      </Switch>

    </Router>
    
  );
}


export default App;

LandingPage.js

import React from 'react'
import Container from '../Components/Container';
import Img from '../Components/HangingLamp';
import Title from '../Components/Title';
import Wok from '../Components/Wok';
import {HomeButton, HomeButtonText} from '../Components/HomeButton';
import {Lamp, Lamp1} from '../Components/Lamp';
import  {Link} from "react-router-dom";


export const LandingPage = () => {

    
    return (
        <Container>
            <Img />
            <Lamp/>
            <Lamp1/>
            <Title>
                Authentic Asian Cuisine Delivered Straight To Your Door!
            </Title>
            <Wok/>
            <Link to="/menu">
                <HomeButton type="button"/>
            </Link>
            <HomeButtonText>
                Order Now!
            </HomeButtonText>
        </Container>
    )
}

export default LandingPage;

MenuPage.js

import React from 'react'
import styled from 'styled-components'
import Container from '../Components/Container'

export const MenuPage = () => {
    return (
        <Container>
            <MenuTitle>
                Our Menu
            </MenuTitle>

        </Container>
    )
}

const MenuTitle = styled.div`
    position: absolute;
    width: 374px;
    height: 68px;
    left: 134px;
    top: 126px;

    font-family: Rosario;
    font-style: normal;
    font-weight: normal;
    font-size: 42px;
    line-height: 51px;
    text-align: center;
`

Upvotes: 0

Views: 37

Answers (2)

Shyam
Shyam

Reputation: 5497

You need to change the order you are using your Route inside the switch statment. Change the order as below and it should work fine. Keep the specific Route to the top . Because when it tries to match /menu it finds a match with / and render that Route.

<Switch>
        <Route path="/menu">
          <p> Menu </p>
        </Route>
        <Route path="/">
          <p>home page </p>
        </Route>
      </Switch>

Upvotes: 1

Avior
Avior

Reputation: 511

MenuPage is not the default export so it can't be fetched by the router

Upvotes: 0

Related Questions