<link>使用“react-router-dom 6.7.0”

Question

我正在尝试创建我的第一个网站，但在重定向到另一个页面时遇到问题。 我将Routes添加到 App.jsx，并添加了到Navbar的链接； 单击Navbar中的“服务”转到"/services" ，但该页面不显示任何内容，仅显示Navbar 。 我也试过NavLink ，但它没有改变任何东西。 请帮我弄清楚问题是什么。

import React from 'react';
import "./App.css";
import { BrowserRouter, Routes,Route } from "react-router-dom";
import Home from './pages/home/Home';
import Samples from './pages/samples/Samples';
import Services from './pages/services/Services';
import Navbar from './components/navbar/Navbar';
import Reviews from './components/reviews/Reviews';
import Contacts from './components/contacts/Contacts';

const App = () => {
  return (
    <div>
      <BrowserRouter>
        <Navbar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/services" element={<Services />} />
          <Route path="/samples" element={<Samples />} />
          {/* <Route path="#reviews" element={<Reviews />} /> */}
        </Routes>
      </BrowserRouter>
    </div>
  )
}

export default App

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { RiMenuFill, RiCloseLine } from 'react-icons/ri';
import './navbar.css';
import MainLogo from "../../assets/MainLogo.png";

const Navbar = () => {
  const [toggleMenu, setToggleMenu] = useState(false); 

  return (
    <div>
      <div className='navbar'>
        <Link style={{textDecoration:"none"}} to="/">
          <img src={MainLogo} alt="main_logo" className="navbar_logo"/>
        </Link>
        <ul className='navbar_links'>
          <li>
            <Link to="/services">Services</Link>
          </li>
          <li>
            <Link to="/samples">Samples</Link>
          </li>
          <li>
            <Link to="/">Reviews</Link>
          </li>
          <li>
            <Link to="#gallery">Gallery</Link>
          </li>
          <li>
            <Link to="#about">About Us</Link>
          </li>
          <li>
            <Link to="#contacts">Contacts</Link>
          </li>
        </ul>
      </div>

Answer 1

路由没有问题。 这里的问题是导航栏使用固定定位， "/services"路由内容呈现在导航栏下方。

为App组件提供一些顶部边距，以将内容向下推到导航栏下方。

例子：

const App = () => {
  return (
    <div className='app'> // <-- app container
      <BrowserRouter>
        <Navbar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/services" element={<Services />} />
          <Route path="/samples" element={<Samples />} />
          {/* <Route path="#reviews" element={<Reviews />} /> */}

        </Routes>
        {/* <Reviews /> */}
      </BrowserRouter>
    </div>
  )
}

应用程序.css

.app {
  margin-top: 93px; // <-- header/navbar height
}

Answer 2

我将 {BrowserRouter} 添加到 index.js，它起作用了

import React from "react";
import ReactDOM from "react-dom";
import App from './App';
import './index.css';
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
    <React.StrictMode>
        <BrowserRouter>
        <App />
        </BrowserRouter>
    </React.StrictMode>
)