React点击NavLink跳转URL更新但新创建组件不渲染如何解决

• 未在路由规则中注册新组件
  这是该问题最高发的原因，新增组件后需要手动在路由配置中添加路径和组件的映射关系，否则即使URL变更路由也不会渲染对应组件。
  React Router v6 配置示例：

// 注意组件为命名导出，导入时需加{}
import { CreateNewUser } from './CreateNewUser'
import { Routes, Route } from 'react-router-dom'

function App() {
  return (
    <Routes>
      {/* 原有路由规则保留 */}
      <Route path="/CreateNewUser" element={<CreateNewUser />} />
    </Routes>
  )
}

React Router v5 配置示例：

import { CreateNewUser } from './CreateNewUser'
import { Switch, Route } from 'react-router-dom'

function App() {
  return (
    <Switch>
      {/* 原有路由规则保留 */}
      <Route path="/CreateNewUser" component={CreateNewUser} />
    </Switch>
  )
}

• 路径匹配不一致
  你当前使用的to="./CreateNewUser"为相对路径，会基于当前页面的路由拼接生成目标地址，如当前页路径为/user，点击后会跳转到/user/CreateNewUser，如果路由配置的是根路径的/CreateNewUser就会匹配失败。可直接改用绝对路径避免该问题：

<NavLink className="btn blue" to="/CreateNewUser">Add New User</NavLink>

• 组件导入错误
  你的CreateNewUser使用的是命名导出，导入时必须用大括号包裹组件名，如果写成默认导入格式import CreateNewUser from './CreateNewUser'会导致导入值为空，路由无法正常渲染。正确导入写法：

import { CreateNewUser } from './CreateNewUser'

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