React Router 6 - 需要刷新页面以便内容发生变化

Question

我一直在 Udemy 上学习 ReactJs，课程已经两年了，React Router 不是 6，我不确定如何修改代码以便它可以自动刷新页面内容。 这是我的 index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Header from "./Header/Header"
import reportWebVitals from './reportWebVitals';

import NavigationBar from "./NavigationBar/NavigationBar";
import TopStories from "./TopStories/TopStories";
import CroatiaNews from "./CroatiaNews/CroatiaNews";
import BusinessNews from "./BusinessNews/BusinessNews";
import EntertainmentNews from "./EntertainmentNews/EntertainmentNews";
import TechnologyNews from './TechnologyNews/TechnologyNews';
import SportsNews from './SportsNews/SportsNews';    
import {BrowserRouter, Route, Routes} from "react-router-dom";
    
    
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
      <React.StrictMode>
            <div className='news-app-container'>
              <Header />
              <div className='news-container'>
                <NavigationBar />
                <BrowserRouter>
                    <Routes>
                      <Route path='/topstories' element={<TopStories/>} />
                      <Route path='/croatia' element={<CroatiaNews/>} />
                      <Route path='/business' element={<BusinessNews/>} />
                      <Route path='/entertainment' element={<EntertainmentNews/>} />
                      <Route path='/technology' element={<TechnologyNews/>} />
                      <Route path='/sports' element={<SportsNews/>} />
                    </Routes>
                  </BrowserRouter> 
                </div>
            </div> 
      </React.StrictMode>
    );
    
    reportWebVitals();

这是我的导航栏：

import React from "react";
import "./NavigationBar.css";

import {BrowserRouter as Routes, NavLink} from "react-router-dom";

class NavigationBar extends React.Component {
    constructor(props) {
        super (props);
    }

    render () {
        return (
            <div className="navbar-container">
                <Routes>
                    <NavLink to='/topstories' className="nav-link active">
                            <i class="fa-solid fa-globe"></i>Top Stories
                    </NavLink>
                    <NavLink to='/croatia' className="nav-link">
                        <i class="fa-solid fa-flag"></i>Croatia
                    </NavLink>
                    <NavLink to='/business' className="nav-link">
                        <i class="fa-solid fa-business-time"></i>Business
                    </NavLink>
                    <NavLink to='/entertainment' className="nav-link">
                        <i class="fa-solid fa-film"></i>Entertainment
                    </NavLink>
                    <NavLink to='/technology' className="nav-link">
                        <i class="fa-solid fa-microchip"></i>Technology
                    </NavLink>
                    <NavLink to='/sports' className="nav-link">
                        <i class="fa-solid fa-person-biking"></i>Sports
                    </NavLink>
                </Routes>    
            </div>
        );
    }
}

export default NavigationBar;

我认为问题出在类名上，但我不确定如何更改它，因为当我更改时，不再有 CSS 适用于我的代码：

.navbar-container {
    width: 280px;
    padding-top: 20px;
    float: left;
    padding-right: 20px;
    position: fixed;
}

.nav-link {
    font-size: 14px;
    color: black;
    text-decoration: none;
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 20px;
}

.nav-link.active {
    background-color:rgba(2, 162, 206, 0.25);
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    color: rgba(2, 162, 206);
}

.nav-link > .fa-solid {
    font-size: 18px;
    margin: 0 10px;
}

所以一切都很好，只是我需要在点击某些内容后刷新页面，这样它就会改变。

Answer 1

问题

NavigationBar 在外部处理路由的路由器呈现。

<div className='news-container'>
  <NavigationBar />
  <BrowserRouter>
    <Routes>
      ...
    </Routes>
  </BrowserRouter> 
</div>

NavigationBar 将另一个路由器呈现为 Routes，因此隐藏了问题。
```
import { BrowserRouter as Routes, NavLink } from "react-router-dom";
```
导入 BrowserRouter 作为 Routes 是 error/typo。

解决方案

将 NavigationBar 移动到路由器中，这样链接和路由都使用相同的路由上下文。

<BrowserRouter>
  <NavigationBar />
  <Routes>
    <Route path='/topstories' element={<TopStories/>} />
    <Route path='/croatia' element={<CroatiaNews/>} />
    <Route path='/business' element={<BusinessNews/>} />
    <Route path='/entertainment' element={<EntertainmentNews/>} />
    <Route path='/technology' element={<TechnologyNews/>} />
    <Route path='/sports' element={<SportsNews/>} />
  </Routes>
</BrowserRouter>

从 NavigationBar 中删除无关的路由器。

import { NavLink } from "react-router-dom";

class NavigationBar extends React.Component {
  ...

  render () {
    return (
      <div className="navbar-container">
        <NavLink to='/topstories' className="nav-link active">
          <i class="fa-solid fa-globe"></i>Top Stories
        </NavLink>
        <NavLink to='/croatia' className="nav-link">
          <i class="fa-solid fa-flag"></i>Croatia
        </NavLink>
        <NavLink to='/business' className="nav-link">
          <i class="fa-solid fa-business-time"></i>Business
        </NavLink>
        <NavLink to='/entertainment' className="nav-link">
          <i class="fa-solid fa-film"></i>Entertainment
        </NavLink>
        <NavLink to='/technology' className="nav-link">
          <i class="fa-solid fa-microchip"></i>Technology
        </NavLink>
        <NavLink to='/sports' className="nav-link">
          <i class="fa-solid fa-person-biking"></i>Sports
        </NavLink>
      </div>
    );
  }
}

React Router 6 - 需要刷新页面以便内容发生变化

React Router 6 - need to refresh page so that content changes

reactjs

react-router

react-router-dom

问题

解决方案