使用React Router路由时首页空白问题求助

问题现象 #

使用React Router根据不同URL展示组件时，访问http://localhost:3000/页面空白，无编译错误，仅出现一条CSS警告：

WARNING in ./src/index.css
(./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/index.css)
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning
(53:3) autoprefixer: start value has mixed support, consider using flex-start instead

相关代码如下：

App.js #

import React from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import { Box } from '@mui/material'

import { Feed, Navb, SearchFeed, ChannelDetail } from './components/index'

const App = () => {
  (
    <BrowserRouter>
      <Box sx={{ backgroundColor: '#000' }}>
        <Navb />
        <Routes>
          <Route path='/' exact element={<Feed />} />
          <Route path='/channel/:id' element={<ChannelDetail />} />
          <Route path='/search/:searchTerm' element={<SearchFeed />} />
        </Routes>
      </Box>
    </BrowserRouter>
  );
}

export default App

/components/index.js #

export { default as ChannelDetail } from './ChannelDetail'
export { default as Navb } from './Navb'
export { default as SearchFeed } from './SearchFeed'
export { default as Feed } from './Feed'

解决方案 #

1. 修复组件未返回JSX的核心问题 #

你的App组件仅用括号包裹了JSX结构，但没有通过return语句返回它，导致组件没有渲染任何内容——这是页面空白的根本原因。修改后的App.js如下：

import React from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import { Box } from '@mui/material'

import { Feed, Navb, SearchFeed, ChannelDetail } from './components/index'

const App = () => {
  // 添加return关键字返回JSX结构
  return (
    <BrowserRouter>
      <Box sx={{ backgroundColor: '#000' }}>
        <Navb />
        <Routes>
          <Route path='/' element={<Feed />} /> {/* React Router v6 中路由默认精确匹配，无需exact属性 */}
          <Route path='/channel/:id' element={<ChannelDetail />} />
          <Route path='/search/:searchTerm' element={<SearchFeed />} />
        </Routes>
      </Box>
    </BrowserRouter>
  );
}

export default App

补充：React Router v6 版本已移除exact属性，所有路由默认都是精确匹配，因此可以直接删除该属性。

2. 解决CSS警告 #

打开src/index.css文件，找到第53行的start关键字，将其替换为flex-start即可消除autoprefixer的兼容性警告。

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