javascript - 如何在React中将路由与index.js分离

Question

我尝试使用 index.js 中的以下代码将路由分离到单独的文件:

import routes from './routes';
ReactDOM.render(
    <Provider store={store}>
        <Router routes={routes}/>
    </Provider>
    , document.getElementById('root')
);

我的routes.js 看起来像这样:

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

由于某种原因，我的页面显示为空白，并显示此代码。

如果我像这样将所有路由包装在index.js中，它就可以完美地工作:

ReactDOM.render(
    <Provider store={store}>
        <Router>
            <Switch>
                <Route exact path="/" component={AppComponent}/>
                <Route exact path="/products" component={ProductContainer}/>
                <Route path="/products/:productId" component={AddProductComponent}/>
            </Switch>
        </Router>
    </Provider>
    , document.getElementById('root')
);

我会保持这样，但我也想分成单个文件路由处理。

Answer 1

Router 只是一个允许 children 属性的 React 组件。将您的路线渲染为组件:

import Routes from './routes';
ReactDOM.render(
  <Provider store={store}>
    <Router>
      <Routes />
    </Router>
  </Provider>
  , document.getElementById('root')
);

这里是一个可以玩的示例工作代码和盒子:https://codesandbox.io/s/ywvn59y7rj