Javascript React路由器isn'；无法呈现我的组件，但是否将我带到新的url路径？

有人能告诉我在这里哪里出了问题吗？我在其他项目中使用过类似这样的代码结构，它工作得很好，不确定问题出在哪里

当我单击我的按钮时，它将更改为新的url路径，但不会呈现新组件

代码如下：

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;

导入“/App.css”；
从“../src/Pages/LandingPage”导入登录页
进口{
BrowserRouter作为路由器，
转换
路线,，
链接
}从“反应路由器dom”；
从“./Pages/MenuPage”导入{MenuPage}；
函数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;

从“React”导入React
从“../Components/Container”导入容器；
从“../Components/HangingLamp”导入Img；
从“../Components/Title”导入标题；
从“../Components/Wok”导入炒锅；
从“../Components/HomeButton”导入{HomeButton，HomeButtonText}；
从“../Components/Lamp”导入{Lamp，Lamp1}”；
从“react router dom”导入{Link}；
导出常量登录页=（）=>{
返回(
正宗的亚洲美食直接送到您的门口！
现在点菜！
)
}
导出默认登陆页面；

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;
`

从“React”导入React
从“样式化组件”导入样式化
从“../Components/Container”导入容器
导出常量菜单页=（）=>{
返回(
我们的菜单
)
}
const MenuTitle=styled.div`
位置：绝对位置；
宽度：374px；
高度：68px；
左：134px；
顶部：126px；
字体系列：罗萨里奥；
字体风格：普通；
字体大小：正常；
字体大小：42px；
线高：51px；
文本对齐：居中；
`

菜单页不是默认导出，因此路由器无法获取它

您需要更改您在交换机站内使用

路由的顺序。改变顺序如下，它应该工作正常。保持特定路线到顶部。因为当它尝试匹配
/菜单
时，它会找到一个与
/
匹配的路径并呈现该路径

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


菜单

主页

否，组件必须默认导出不是强制性的/规则。@Shyam，是的，组件必须默认导出不是强制性的。但是在主组件中，用户没有将登录组件导出为命名的导出（从“某物”导入{something}），而是从“某物”导入某物。这就是他必须默认导出组件的原因。他将其导出为
export const MenuPage
，并将其导入为
import{MenuPage}从“./Pages/MenuPage”；
为什么要为一个组件执行两次导出？导出const LandingPage=（）=>{}和导出默认LandingPage。您可以从“导出const Landing=（）=>{}”中删除导出.我甚至没有注意到！因为我做了皇家空军的捷径，我没有意识到它会自动导出它-谢谢你指出它Cheers mate现在工作很好，没有意识到命令应该是那样的