React组件在指定路由下不显示的问题求助

看起来你遇到的核心问题是Router组件嵌套引发的路由上下文冲突，这是拆分Nav和主Router组件后很容易踩的坑，我来帮你一步步解决：

最可能的问题：Nav组件内部嵌套了Router #

之前单一组件时，Nav和Route都处于同一个Router上下文里，路由能正常生效；拆分后如果Nav组件自己又包裹了一层BrowserRouter（或其他Router），就会导致内层Link的跳转仅在内部Router上下文生效，外层的<Switch>完全感知不到这些路由变化，自然不会渲染对应的组件。

修复步骤： #

1. 移除Nav组件内的Router包裹
   你的Nav组件只需直接使用react-router-dom的Link组件即可，不需要再套一层Router——因为外层的AppContainer已经提供了全局的Router上下文。

举个例子：

错误的Nav写法（导致问题）：

import { BrowserRouter, Link } from 'react-router-dom';

export const Nav = () => {
  return (
    <BrowserRouter> {/* 这里的嵌套Router是问题根源！ */}
      <div className="nav">
        <Link to="/dashboard">Dashboard</Link>
        <Link to="/settings">Settings</Link>
      </div>
    </BrowserRouter>
  );
};

正确的Nav写法：

import { Link } from 'react-router-dom';

export const Nav = () => {
  return (
    <div className="nav">
      <Link to="/dashboard">Dashboard</Link>
      <Link to="/settings">Settings</Link>
    </div>
  );
};

2. 确认AppContainer的Router配置无误
   你的AppContainer代码看起来没问题，但要确保history是正确创建的（比如用createBrowserHistory），且所有路由都处于同一个Router上下文内：

import { Router, Switch, Route } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import Nav from './Nav';
import Dashboard from './Dashboard';
import Settings from './Settings';

const history = createBrowserHistory();

export class AppContainer extends React.Component { 
  render() { 
    return ( 
      <Router history={history}> 
        <Nav /> 
        <Switch> 
          <Route exact path="/dashboard" component={Dashboard} /> 
          <Route exact path="/settings" component={Settings} /> 
          <Route exact path="/" component={Dashboard} /> 
        </Switch> 
      </Router> 
    ); 
  } 
}

额外排查点 #

如果上面的修复没解决问题，可以再检查以下几点：

• 确认登录逻辑没有错误修改路由上下文，或重置history对象
• 检查Dashboard和Settings组件是否正确导出，无语法错误
• 打开浏览器控制台，查看是否有路由相关的报错信息

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