BrowserRoute Switch не показывает страницы

Question

Я в полном упадке, я уже часами следил за учебниками, и я не могу заставить его работать. в основном коммутатор не работает, когда я нажимаю ссылки. Он просто ничего не отображает, но меняет ссылку.

Приложение. js

import './index.css';
import React, { Component } from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import Home from './Home';
import Shop from './Shop';
import MainNav from './MainNav';

class App extends Component {
   render() {
    return (
        <BrowserRouter>
        <div className="App">
          <MainNav /> 
            <Switch>
              <Route exact path="/" Component={Home}/>
              <Route path="/Shop" Component={Shop}/>
            </Switch>
            </div>
        </BrowserRouter>
    );
 }
}
export default App;

MainNav. js

import { IoIosHome } from "react-icons/io";
import { IoIosListBox } from "react-icons/io";
import { IoIosBeer } from "react-icons/io";
import { IoIosArrowDown } from "react-icons/io";
import React, { useState, useEffect, useRef, Component, } from 'react';
import { CSSTransition } from 'react-transition-group';
import {NavLink} from "react-router-dom";

class MainNav extends Component {
  render() {
    return (      
          <Navbar>
            <NavLink exact to="/" ><NavItem icon={<IoIosHome />}/></NavLink>
            <NavLink to="/Shop"><NavItem icon={<IoIosBasket />}/></NavLink>
            <NavItem icon={<IoIosListBox />} />
            <NavItem icon={<IoIosArrowDown />}>
              <DropdownMenu></DropdownMenu>
            </NavItem>
          </Navbar> 
    );
 } 
}

function NavItem(props) {
  const[open, setOpen] = useState(false);

  return (
   <li classname="nav-item">
     <a href="#" className="icon-button" onClick={() => setOpen(!open)}>
     {props.icon}
     </a>  

     {open && props.children}
   </li>  
  );
}

Дом и магазин просто вводят текст и работают, когда я приношу их за пределами выключателя. ive попробовал изменить все эти примеры на классы и функции соответственно.

https://www.w3jar.com/react-navigation-example-with-react-router-dom/ https://codesandbox.io/s/xkj1xKO6r?file= / index. js https://www.youtube.com/watch?v=lCbcB9AU-98&list=PL3I69UeHTyDNUK8t-GIkwWfY73rEW8LS2&index=4&t=0s

Я начинаю думать, что упускаю что-то еще.

Answer 1

<Route path="/Shop" Component={Shop}/> до <Route path="/Shop"><Shop /></Route> Не уверен, почему он не может прочитать его в фигурных скобках, но это работает.