React类组件报错TypeError: Routes.map()不是函数，路由配置后页面异常

问题根源分析 #

你遇到的TypeError: Routes.map()不是函数及页面消失问题，主要是React Router v6的API用法错误，同时存在一处拼写失误：

• Router初始化方式错误：createBrowserRouter是生成路由配置对象的工具函数，不是组件，不能直接用<Router>标签包裹内容；RouterProvider需要接收router属性传入配置好的路由对象，而非直接嵌套Route组件。
• 组件拼写错误：Navbar中导入的Linnk是拼写错误，应为Link。
• 冗余属性：React Router v6中Route不再需要exact属性，默认就是精确匹配。

修复步骤及代码修改 #

1. 修正Navbar组件的拼写错误 #

// Navbar.js
import React, { Component } from 'react'
// 修正拼写：Linnk → Link
import { Link } from 'react-router-dom'

export default class Navbar extends Component {
    render() {
        return (
            <>
                <nav className="navbar navbar-expand-lg bg-body-tertiary">
                    <div className="container-fluid">
                        <Link className="navbar-brand" to="/">NewsMonkey</Link>
                        <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                            <span className="navbar-toggler-icon"></span>
                        </button>
                        <div className="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul className="navbar-nav me-auto mb-2 mb-lg-0">
                                <li className="nav-item">
                                    <Link className="nav-link active" aria-current="page" to="/">Home</Link>
                                </li> 

                                <li className="nav-item">
                                    <Link className="nav-link" to="/business">Business</Link>
                                </li>

                                <li className="nav-item">
                                    <Link className="nav-link" to="/entertainment">Entertainment</Link>
                                </li>

                                <li className="nav-item">
                                    <Link className="nav-link" to="/general">General</Link>
                                </li>

                                <li className="nav-item">
                                    <Link className="nav-link" to="/health">Health</Link>
                                </li>

                                <li className="nav-item">
                                    <Link className="nav-link" to="/science">Science</Link>
                                </li>

                                <li className="nav-item">
                                    <Link className="nav-link" to="/sports">Sports</Link>
                                </li>

                                <li className="nav-item">
                                    <Link className="nav-link" to="/technology">Technology </Link>
                                </li>  

                            </ul>
                        </div>
                    </div>
                </nav>
            </>
        )
    }
}

2. 修正App.js的路由配置逻辑 #

按照React Router v6的正确用法，先创建路由配置对象，再通过RouterProvider传入：

// App.js
import './App.css';
import Navbar from './component/Navbar';
import React, { Component } from 'react'
import News from './component/News';

import {
  createBrowserRouter,
  RouterProvider,
  Route
} from "react-router-dom";

export default class App extends Component {
  render() {
    // 创建路由配置对象
    const router = createBrowserRouter([
      { path: "/", element: <News key="general" pageSize={10} country="us" category="general"/> },
      { path: "/business", element: <News key="business" pageSize={10} country="us" category="business"/> },
      { path: "/entertainment", element: <News key="entertainment" pageSize={10} country="us" category="entertainment"/> },
      { path: "/general", element: <News key="general" pageSize={10} country="us" category="general"/> },
      { path: "/health", element: <News key="health" pageSize={10} country="us" category="health"/> },
      { path: "/science", element: <News key="science" pageSize={10} country="us" category="science"/> },
      { path: "/sports", element: <News key="sports" pageSize={10} country="us" category="sports"/> },
      { path: "/technology", element: <News key="technology" pageSize={10} country="us" category="technology"/> },
    ]);

    return (
      <div>
        <Navbar/>
        {/* 将路由对象传入RouterProvider */}
        <RouterProvider router={router} />
      </div>
    )
  }
}

关键说明 #

React Router v6和旧版本API差异较大，1.5年前的教程可能基于v5，需注意区分：v6用createBrowserRouter定义路由，RouterProvider提供路由上下文，不再使用<Switch>和exact。

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