React中将路由从index.js分离后页面空白的问题求助

你遇到的核心问题是错误地使用了React Router的API——Router组件（比如BrowserRouter）根本没有routes这个props，你把路由结构作为props传递进去的话，Router完全不会渲染它，这就是页面空白的原因。

下面给你两种简单可行的修正方案，适配你当前的代码结构：

方案一：直接将路由作为Router的子元素（最简单） #

这种方法几乎不需要改动你的routes.js，只需要调整index.js里的渲染方式：

1. 保持你的routes.js不变（确保已经导入需要的组件和路由相关API）：

import { Switch, Route } from 'react-router-dom';
import AppComponent from './path/to/AppComponent';
import ProductContainer from './path/to/ProductContainer';
import AddProductComponent from './path/to/AddProductComponent';

export default (
  <Switch>
    <Route exact path="/" component={AppComponent}/>
    <Route exact path="/products" component={ProductContainer}/>
    <Route path="/products/:productId" component={AddProductComponent}/>
  </Switch>
);

2. 修改index.js，把导入的routes作为Router的子元素渲染，而不是通过props传递：

import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
// 注意：这里要引入具体的Router实现，比如BrowserRouter（推荐）或者HashRouter
import { BrowserRouter as Router } from 'react-router-dom';
import routes from './routes';
import store from './path/to/store';

ReactDOM.render(
  <Provider store={store}>
    <Router>
      {routes} {/* 把路由结构作为子元素插入Router */}
    </Router>
  </Provider>,
  document.getElementById('root')
);

方案二：导出路由配置数组（更适合复杂路由管理） #

如果你的路由后期会变得复杂（比如需要嵌套路由、权限控制），推荐用数组定义路由配置，再动态渲染，可读性和可维护性更好：

1. 修改routes.js导出配置数组：

import AppComponent from './path/to/AppComponent';
import ProductContainer from './path/to/ProductContainer';
import AddProductComponent from './path/to/AddProductComponent';

export default [
  {
    path: "/",
    exact: true,
    component: AppComponent
  },
  {
    path: "/products",
    exact: true,
    component: ProductContainer
  },
  {
    path: "/products/:productId",
    component: AddProductComponent
  }
];

2. 在index.js里遍历数组渲染路由：

import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import routes from './routes';
import store from './path/to/store';

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <Switch>
        {routes.map((route, index) => (
          <Route
            key={index}
            exact={route.exact}
            path={route.path}
            component={route.component}
          />
        ))}
      </Switch>
    </Router>
  </Provider>,
  document.getElementById('root')
);

如果你的项目用的是React Router v6+，可以换成Routes和useRoutes钩子来实现（语法略有不同，但核心思路一致），不过从你用Switch的代码来看，应该是v5版本，上面的方案完全适用。

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