React Router点击链接URL更新但页面不渲染，刷新才生效问题求助

核心问题根因 #

• 应用中存在两个独立的BrowserRouter实例：App.js已经在最外层包裹了Router，Nav.js中又额外嵌套了一层Router。两个Router的状态完全独立，点击Nav内的Link只会修改内层Router的路径，外层负责路由匹配渲染的Router感知不到路径变化，因此不会触发对应页面渲染。手动刷新时浏览器会重置全局路径，外层Router读取地址栏路径才会完成匹配渲染。
• 次要语法问题：Route的render属性用法不规范，render需要接收返回JSX的回调函数，直接传入组件引用不符合语法要求，也可以替换为更适配的component属性写法。

修复步骤 #

1. 修改Nav.js，删除额外的Router包裹 #

修改后完整代码：

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

function Nav(){
    return(
        <nav>
            logo
                <Link to="/about">
                About
                </Link>
                <Link to='/shop'>
                shop
                </Link>
        </nav>
    )
}

export default Nav

2. 修正App.js中Route的写法 #

两种修正方式二选一即可：

方式1：使用component属性（无额外传参时更简洁，推荐）

<Route exact path='/about' component={About} />

方式2：正确使用render属性

<Route exact path='/about' render={() => <About />} />

修改后完整App.js代码：

import React from 'react';

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

function App() {
  return (
    <>
    <Router>
      <Nav/>
      <Switch>
      <Route exact path='/about' component={About} />
      {/* 后续可在此添加shop等其他路由 */}
      </Switch>
    </Router>
    </>
  );
}

export default App;

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