текст для тега h1 не отображается в браузере

Question

Я пытаюсь отобразить текст в тегах h1, но только около about.js отображает текст. Первый - это компонент shop.js, а второй файл - app.js файл.

import React from 'react';
import './App.css';

function Shop() {
return (
 <div>
   <h1>Shop page</h1>
 </div>
);
}
export default Shop;

Мой App компонент:

import React from 'react';
import Nav from './Nav';
import Shop from './Shop';
import About from './About';
import Home from './Home';
import './App.css';
import {BrowserRouter as Router,Switch,Route} from 'react-router-dom';

function App() {
 return (
 <Router>
  <div className="App">
    <Nav />
    <Switch>
      <Router path="/" exact component={Home} />
     
      <Route path="/about"component={About} />

      <Router path="/shop"  component={Shop} />
      
    </Switch>
  </div>
  </Router>
  );
}      

export default App;

Answer 1

Ваши маршруты и сам компонент Shop выглядят нормально, поэтому я предполагаю, что вы просто забыли экспортировать компонент Shop:

export function Shop() {
  return (
   <div>
     <h1>Shop page</h1>
   </div>
  );
}

Answer 2

попробуйте добавить маршрут shop перед маршрутом home следующим образом:

<Route path="/about"component={About} />
<Router path="/shop"  component={Shop} />
<Router path="/" exact component={Home} />
 

Я создал пример кода здесь