Reactjs 为什么Route不能与我的react应用程序一起使用？

我正在尝试开发react应用程序。问题是当我使用路线和道岔时，它不工作。事实上，什么都没有发生。有人能告诉我这里可能出现的问题吗？ 这是我的密码：

import React, { Component } from 'react';
import Home from './HomeComponent';
import Menu from './MenuComponent';
import { DISHES } from '../shared/dishes';
import DishDetailComponent from './DishdetailComponent';
import Header from './HeaderComponent';
import Footer from './FooterComponent';
import { Switch, Route, Redirect, BrowserRouter as Router } from 'react-router-dom';

class Main extends Component {
  constructor(props) {
    super(props);

    this.state = {
      dishes: DISHES
    };
  }

  render() {
    const HomePage = () => {
      return(
        <Home />
      );
    }

    return (
      <div>
        <Header />
        <Router>
          <Switch>
            <Route path="/home" Component={HomePage} />  
            <Route path="/menu" Component={() => <Menu dishes={this.state.dishes} />} />
            <Redirect to="home" />
          </ Switch> 
        </Router>
      <Footer />

      </div>
    );
  }
}

import React，{Component}来自'React'；
从“/HomeComponent”导入主目录；
从“/MenuComponent”导入菜单；
从“../shared/disks”导入{disks}；
从“./DishDetailComponent”导入DishDetailComponent；
从“./HeaderComponent”导入标题；
从“/FooterComponent”导入页脚；
从“react Router dom”导入{Switch，Route，Redirect，BrowserRouter as Router}；
类主扩展组件{
建造师（道具）{
超级（道具）；
此.state={
菜品：菜品
};
}
render（）{
const主页=（）=>{
返回(
);
}
返回(
} />
);
}
}

一个明显的错误是您在

组件

属性中将“C”大写，因此您应该像

组件={HomePage}

以下是您可以改进的其他事项：

如果要使用内联函数，最好使用

渲染

道具；如果要直接使用组件，最好只使用

组件

道具。此外：

const HomePage = () => {
      return(
        <Home />
      );
    }

---

什么也没说？您试图在哪个URL上查看您的应用程序？即使交换机不起作用，您仍应该看到呈现的页眉和页脚。您应该在围绕应用程序组件的index.js文件中使用BrowserRouter。这并不意味着它忽略路由部分，只显示页眉和页脚。主页（home组件）包含一行简单的html代码。查询已解决

render() {

    return (
      <div>
        <Header />
        <Router>
          <Switch>
            <Route path="/home" component={Home} />  
            <Route path="/menu" render={() => <Menu dishes={this.state.dishes} />} />
            <Redirect to="home" />
          </ Switch> 
        </Router>
      <Footer />

      </div>
    );
  }