React-Router中this.props.children失效：网站首页显示空白求助

我正尝试使用React-Router与TypeScript搭建网站导航，但功能异常，访问时首页显示空白而非预期的Home页面。以下是我的相关代码文件：

app.tsx #

// app.tsx
import * as React from 'react';
import '../App.css';
class App extends React.Component<any,any> {
  public render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
}
export default App;

index.tsx #

// index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import {AppRouter} from './router';
ReactDOM.render(
  <AppRouter/>,
  document.getElementById('root') as HTMLElement
);
registerServiceWorker();

router.tsx #

import * as React from 'react';
import { Route,Router } from 'react-router';
import App from './components/App';
import HomePage from './components/home/HomePage';
import createHistory from 'history/createBrowserHistory';
const history = createHistory();
export const AppRouter = () => {
  return (
    <Router history={history}>
      <Route path="/" component={App} >
        <Route path="/" exact={true} component={HomePage} />
      </Route>
    </Router>
  );
}

问题排查与修复 #

我一眼就发现问题所在啦——你用的是React Router v4+，但嵌套路由的写法还停留在旧版本（v3及以前）！在v4+里，不能直接把子<Route>嵌套在父<Route>的标签内部，得换个方式：

1. 修复路由结构（v4/v5版本） #

修改router.tsx，用Switch确保只匹配第一个符合的路由，同时把路由内容作为App组件的子元素传递：

import * as React from 'react';
// 别忘了导入Switch
import { Route, Router, Switch } from 'react-router';
import App from './components/App';
import HomePage from './components/home/HomePage';
import createHistory from 'history/createBrowserHistory';
const history = createHistory();

export const AppRouter = () => {
  return (
    <Router history={history}>
      <App>
        <Switch>
          {/* exact确保只有访问根路径时才渲染HomePage */}
          <Route path="/" exact component={HomePage} />
        </Switch>
      </App>
    </Router>
  );
}

2. 检查依赖是否正确 #

另外，要确保你安装了浏览器环境需要的react-router-dom（react-router只是核心库），如果没装的话执行：

npm install react-router-dom @types/react-router-dom

这样修改后，App组件的{this.props.children}就能正确渲染HomePage，首页就不会空白啦～

React+TypeScript+Redux 导航搭建更佳实践 #

如果想要更现代、更易维护的方案，推荐用React Router v6 + Redux Toolkit的组合，这也是现在React生态的主流写法，类型支持也更完善：

第一步：安装依赖 #

npm install react-router-dom @types/react-router-dom @reduxjs/toolkit react-redux @types/react-redux

第二步：重构路由（v6版本） #

router.tsx用v6的Routes、Route和Outlet来处理嵌套路由，API更简洁：

import * as React from 'react';
// 用BrowserRouter代替手动创建history，更省心
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import App from './components/App';
import HomePage from './components/home/HomePage';
// 可以添加其他页面示例
import AboutPage from './components/about/AboutPage';

export const AppRouter = () => {
  return (
    <Router>
      <Routes>
        {/* 父路由，element指定渲染的组件 */}
        <Route path="/" element={<App />}>
          {/* index路由是父路径的默认子路由 */}
          <Route index element={<HomePage />} />
          <Route path="about" element={<AboutPage />} />
        </Route>
      </Routes>
    </Router>
  );
};

第三步：修改App组件（用Outlet渲染子路由） #

把类组件改成函数组件（现在React更推荐函数组件+hooks），用Outlet渲染子路由内容，同时添加导航链接：

import * as React from 'react';
import { Outlet, Link } from 'react-router-dom';
import '../App.css';

// 用React.FC定义函数组件，类型更明确
const App: React.FC = () => {
  return (
    <div className="app-container">
      {/* 顶部导航栏 */}
      <nav className="nav-bar">
        <Link to="/" className="nav-link">首页</Link>
        <Link to="/about" className="nav-link">关于我们</Link>
      </nav>
      {/* 渲染子路由的内容 */}
      <main className="main-content">
        <Outlet />
      </main>
    </div>
  );
};

export default App;

第四步：集成Redux Toolkit #

创建store.ts

import { configureStore } from '@reduxjs/toolkit';
// 示例：导入用户状态的切片
import userReducer from './features/user/userSlice';

// configureStore自动处理很多Redux的配置，比如devTools、中间件
export const store = configureStore({
  reducer: {
    user: userReducer,
  },
});

// 定义全局状态和dispatch的类型，方便组件中使用
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

创建用户切片（features/user/userSlice.ts）

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

// 定义用户状态的类型
interface UserState {
  username: string | null;
  isLoggedIn: boolean;
}

// 初始状态
const initialState: UserState = {
  username: null,
  isLoggedIn: false,
};

// 创建切片，自动生成action和reducer
const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    login: (state, action: PayloadAction<string>) => {
      // Redux Toolkit允许直接修改状态，内部会转成immutable更新
      state.username = action.payload;
      state.isLoggedIn = true;
    },
    logout: (state) => {
      state.username = null;
      state.isLoggedIn = false;
    },
  },
});

// 导出action
export const { login, logout } = userSlice.actions;
// 导出reducer给store使用
export default userSlice.reducer;

第五步：在入口文件包裹Redux Provider #

修改index.tsx，用Provider把整个应用包裹起来，让所有组件都能访问Redux状态：

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import './index.css';
import { AppRouter } from './router';
import { Provider } from 'react-redux';
import { store } from './store';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(
  <Provider store={store}>
    <AppRouter />
  </Provider>,
  document.getElementById('root') as HTMLElement
);
registerServiceWorker();

这个方案的优势 #

• React Router v6的API更直观，类型提示友好，避免了旧版本的路由匹配坑；
• Redux Toolkit大幅减少了Redux的样板代码，自动处理immutable更新，类型支持完善；
• 函数组件+hooks的写法更灵活，符合React的发展趋势；
• 整体结构清晰，后期维护和扩展更方便。

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