反应问题，当我将标头组件添加到我的主页组件时，没有任何内容加载

Question

import React from 'react';
import { ChakraProvider, CSSReset } from '@chakra-ui/react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Nav from './nav';
import Home from './components/home';
import Contact from './components/contact
import Menu from './components/menu';
import About from './components/About';
import Reservations from './components/reservations';
import Header from './header';

function App() {
  return (
    <ChakraProvider>
      <CSSReset />
      <Router>
        <Nav/>
        <Routes>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
          <Route path="/menu" component={Menu} />
          <Route path="/reservations" component={Reservations} />
       </Routes>
     </Router>
    </ChakraProvider>
  );
}

export default App;

我希望能够在不同页面之间切换，并在每个页面上运行不同的组件，但只有导航栏可用。我是新手，所以我不确定问题是什么

import Header from '../header'

export default function Home() {
  return (
    <>
      <Header/>
    </>
  )
}

const Header = () => {
  return (
    <div style={{ backgroundColor: '#495e57', textAlign: 'center', padding: '20px' }}>
      {/* Centered Image */}
      <img
        src="little/src/pictures/small_logo.png"       
        alt="Centered"
        style={{ display: 'block', margin: '0 auto', height:'50px', width:'50px'}}
      />

      {/* Text Section */}
      <div style={{ marginTop: '20px' }}>
        <h1 style={{ color: 'blue' }}>Your Header Titl</h1>
        <p style={{ fontSize: '18px', color: 'green' }}>Your subheading or additional information goes here.</p>
      </div>
    </div>
  );
};

export default Header;

import React from 'react';
import { Link } from 'react-router-dom';
import { Box, Flex, Spacer, Link as ChakraLink, Text, Button } from '@chakra-ui/react';

const Nav = () => {
  return (
  <>
    <Box bg="black" p="4">
      <Flex>
        <Text fontSize="xl" fontWeight="bold" color="white">
          My Logo
        </Text>
        <Spacer />
        <Box>
          <ChakraLink as={Link} to="/" color="white" mx="2">
            Home
          </ChakraLink>
          <ChakraLink as={Link} to="/about" color="white" mx="2">
            About
          </ChakraLink>
          <ChakraLink as={Link} to="/contact" color="white" mx="2">
            Contact
          </ChakraLink>
          <ChakraLink as={Link} to="/menu" color="white" mx="2">
            Menu
             </ChakraLink>
             
            <ChakraLink as={Link} to="/reservations" color="white" mx="2">
            reservations
            </ChakraLink>
        </Box>

        <Button colorScheme="teal" ml="2">
          Sign In
        </Button>
      </Flex>
    </Box>

</>
  );
};

export default Nav;

Answer 1

您的联系人导入缺少单引号和分号。

修复为：

import Contact from './components/contact';