Question

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

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

我的route.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只是一个React组件，允许children道具。将您的路线作为组件呈现：

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

这里有一个示例工作代码和框可播放：https://codesandbox.io/s/ywvn59y7rj

Answer 2

更详细的答案，将route.js更改为

class Routes extends React.Component {
    render() {
        return (
            <Switch>
                <Route exact path="/" component={AppComponent}/>
                <Route exact path="/products" component={ProductContainer}/>
                <Route path="/products/:productId" component={AddProductComponent}/>
            </Switch>
        )
    }
}
 export default Routes;

并将index.js更改为：

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

工作得很好。我希望这对任何人都有帮助

Answer 3

另一种更易于维护的选择是将路由像JSON一样存储在数组中，然后在它们上循环。

routes.js

import AppComponent from 'xxx'
export default const routes = [
  {
    path: '/',
    component: AppComponent,
    exact: true
  }
  // and so on
]

index.js

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

如何在React中将路由与index.js分开

3 个答案: