页面正文不显示

Question

I am trying to make this multiple pages website in React. Everything works for the home page but for the logIn and SignUp page nothing shows underneath the header. This is the App.js code

import React from 'react';
import Navbar from './Components/Navbar';
import Home from './Components/Home';
import LogIn from './Pages/LogIn';
import SignUp from './Pages/SignUp';
import {BrowserRouter as Router, Switch,Route } from 'react-router-dom';
class App extends React.Component {
render(){
  return(
    <Router>
    <div>
  <Navbar/>
  <Switch>
  <main style ={{marginTop:'100px'}}>
  <Route path="/" exact component={Home}/>
  <Route path="./Pages/LogIn" exact component={LogIn}/>
  <Route path="/SignUp" component={SignUp}/>
  </main>
  </Switch>
  </div>
  </Router>
  );
};
}
export default App;

This is the LogIn.js code:

import React, { Component } from 'react'

export class LogIn extends Component {
    render() {
        return (
            <div>
                <h1>LogIn</h1>

            </div>
        )
    }
}

export default LogIn;

This is the NavBar component which i have connected to a Toolbar file. The code works perfectly for Home page but not for the other pages.

import React, {Component} from 'react';
import Toolbar from './Toolbar.js';

export class Navbar extends Component{
    render(){
        return (
            <div className="Navbar">
                <Toolbar/>
                </div>
        );
    }
}
export default Navbar;

And the toolbar component:

import React from 'react';
import './Toolbar.css';
import DrawerToggleButton from'./DrawerToggleButton';

const toolbar = props => (
    <header className="toolbar">
        <nav className="toolbar__navigation">
            <div className="toolbar_toggle-button">
                <DrawerToggleButton click={props.drawerClickHandler}/>
                </div>
                <div className="toolbar__logo"><a href="/">BOOKSHOP</a></div>
                <div className="spacer"/>
                <div className="toolbar_navigation-itmes">
                    <ul>
                        <li><a href="/Pages/LogIn">Log In</a></li>
                        <li><a href="/Pages/SignUp">Sign Up</a></li>
                        </ul> 
                    </div>
                    <div className="toolbar__cart"><a href="/"><img src="Images/basket.png" alt="Basket" width="40"/></a></div>
            </nav>
        </header>
);
export default toolbar;

Answer 1

I think these should be the same:

[ <Route path="./Pages/LogIn" exact component={LogIn}/>
| <Route path="/SignUp" component={SignUp}/>
|
| <li><a href="/Pages/LogIn">Log In</a></li>
[ <li><a href="/Pages/SignUp">Sign Up</a></li>

Do this:

<Route path="/Pages/LogIn" exact component={LogIn}/>
<Route path="/Pages/SignUp" component={SignUp}/>

<li><a href="/Pages/LogIn">Log In</a></li>
<li><a href="/Pages/SignUp">Sign Up</a></li>