如何在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只是一個React組件，允許使用children道具。 將您的路線作為組件呈現：

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

這里有一個示例工作codeandbox可以播放： 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')
);