如何启动并运行react路由器

我有一个简单的react路由器dom集，链接根本无法工作。我的代码如下：

index.js:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";
import "./containers/index.css";
import App from "./containers/App";
import reportWebVitals from "./reportWebVitals";
ReactDOM.render(
<Router>
<App />
</Router>
,document.getElementById("root")
);

app.js:

import "./App.css";
import { Switch, Route } from "react-router-dom";
import Homepage from "../containers/Homepage";
import About from "../containers/Homepage";
import Contact from "../containers/Homepage";
import Registration from "../containers/Homepage";
import Services from "../containers/Homepage";
import Schedule from "../containers/Homepage";
import Gallery from "../containers/Homepage";
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
const App = () => {
return (
<div className="App">
<Navbar />
<Footer />
<Switch>
<Route exact path="/" component={Homepage} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Route path="/registration" component={Registration} />
<Route path="/services" component={Services} />
<Route path="/schedule" component={Schedule} />
<Route path="/gallery" component={Gallery} />
</Switch>
</div>
);
}
export default App;

主页.js:

import React from 'react';
import { Link } from 'react-router-dom';
const Homepage = () => (
<div>
<h2>Homepage</h2>
<Link to="/about"> About </Link>
</div>
);
export default Homepage;

关于

import React from 'react';
import { Link } from 'react-router-dom';
const About = () => (
<div>
<h2>About</h2>
<Link to="/"> Home </Link>
</div>
);
export default About;

所有其他组件都是简单的虚拟组件，类似于about和homepage。只是想在继续之前让路由正常工作。

我错过了什么？