React路由切换URL变更但组件不自动渲染问题求助

嘿，我一眼就看到你遇到的核心问题了——你在App和Navbar组件里重复嵌套了<BrowserRouter>。每个BrowserRouter都会创建独立的路由上下文和历史对象，这就导致Navbar里的Link触发的路由变化，根本无法被App里的Switch感知到，自然不会自动更新组件；只有手动刷新页面时，浏览器重新读取URL，App里的Router才会匹配到对应路由渲染组件。

下面是具体的修复步骤：

1. 移除Navbar组件内的<BrowserRouter> #

Navbar不需要单独的Router实例，它只需要在App的路由上下文里就能正常使用Link。修改后的Navbar代码：

import React, {useState} from 'react';
import './Navbar.css';
import {Link} from 'react-router-dom';

function Navbar() {
 return(
  <div>
   <p style={{color: 'white', fontWeight:'500', fontSize:'50px'}}> Simple Planner </p>
   <div className='navbarOptions' style={{backgroundColor:'black'}}>
    <ul>
     <Link to='/app/' exact style={{ fontSize:'30px', color: '#48c6ef', fontWeight: '700'}}>
      <li> Register </li>
     </Link>
     <Link to='/app/login/' exact style={{fontSize:'30px', color: '#48c6ef', fontWeight:'700'}}>
      <li> Login </li>
     </Link>
     <Link to='/app/notes/' exact style={{fontSize:'30px', color: '#48c6ef' , fontWeight:'700'}}>
      <li> Notes </li>
     </Link>
    </ul>
   </div>
  </div>
 );
}
export default Navbar ;

2. 让App组件的<BrowserRouter>包裹所有路由相关内容 #

把Navbar也放到BrowserRouter内部，确保整个应用共享同一个路由上下文。修改后的App代码：

import React , {useState} from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios';
import bootstrap from '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import Register from './Components/Register';
import Login from './Components/Login';
import Notes from './Components/Notes' ;
import Navbar from './Components/Navbar';
import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom";

function App() {
 const[getDefault , setDefault] = useState(String);
 return (
  <div className="App">
   <h1>react app</h1>
   <BrowserRouter>
    {/* Navbar现在处于统一的路由上下文里了 */}
    <Navbar/>
    <div className="App">
     <Switch>
      <Route path='/app/' component={Register} exact />
      <Route path='/app/login/' component={Login} exact/>
      <Route path='/app/notes/' component={Notes} exact/>
      {/* 新增默认重定向，避免无匹配路由时的空白页面 */}
      <Redirect to="/app/" />
     </Switch>
    </div>
   </BrowserRouter>
  </div>
 );
}
export default App;

补充说明 #

BrowserRouter是React Router的核心容器，它负责提供路由的全局上下文（包括历史记录、当前路径等）。当你在多个地方实例化它时，每个实例都是完全独立的——Navbar里的Link只会更新自己Router的历史，而App里的Switch监听的是另一个Router的历史，自然不会同步响应路径变化。把所有路由相关内容放到同一个BrowserRouter下，就能保证Link和Switch共享上下文，点击Link时会立即触发路由匹配和组件更新。

另外，你的Node.js后端和MongoDB和这个问题无关，这是纯前端路由的上下文冲突问题~

内容的提问来源于stack exchange，提问作者RashadArbab