为什么单击链接后我的React应用程序不呈现？

Question

我希望我的应用程序组件能够完整显示其导航栏和着陆区。在localhost:3000/上，我按照app.js获取带有Navbar和容器的SPA，但是当我单击链接时，除div之外，页面变为空白。

app.js：

import React, { Fragment } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Navbar from './components/layout/Navbar';
import Landing from './components/layout/Landing';
import Register from './components/auth/Register';
import Login from './components/auth/Login';
import './App.css';

const App = () =>  (
 
  <Router>
  <Fragment>
    <Navbar />
    <Route exact path='/' component={Landing} />
    <section className="container">
      <Switch>
        <Route exact path='/register' component={Register} />
        <Route exact path='/login' component={Login} />
      </Switch>
      </section> 
  </Fragment>
  </Router>
 
);
export default App;

导航栏：

import React from 'react';
import { Link } from 'react-router-dom';

const Navbar = () => {
    return (
        <nav className="navbar bg-dark">
        <h1>
          <Link to="/">
            <i className="fas fa-code"></i>Devs United
          </Link>
        </h1>
        <ul>
          <li><a href="£!">Developers</a></li>
          <li><Link to="/register">Regiiister</Link></li>
          <li><Link to="/login">Login</Link></li>
        </ul>
      </nav>
    )
}

export default Navbar

着陆组件：

import React from 'react';
import { Link } from 'react-router-dom';

const Landing = () => {
    return (
        <section className="landing">
        <div className="dark-overlay">
          <div className="landing-inner">
            <h1 className="x-large">Developer Forum</h1>
            <p className="lead">Create your developer profile, share posts
              and get help from other devs</p>
            <div className="buttons">
              <Link to="/register" className="btn btn-primary">Register</Link>
              <Link to="/login" className="btn btn">Login</Link></div>
          </div>
        </div>
      </section>
    )
}

export default Landing

我的注册名和登录名都是裸露的骨头：

import React from 'react';

const Register = () => {
    return (
        <div>
            Register
        </div>
    )
};

export default Register;

我想念什么？

Answer 1

这里是预期的输出https://6vzj1.csb.app/

这里是代码资源https://codesandbox.io/s/fast-mountain-6vzj1

继续练习。

快乐编码。