Как отделить маршруты от index.js в React

Question

Я пытаюсь разделить мои маршруты в отдельный файл, используя следующий код в index.js:

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

myways.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

Более подробный ответ, изменив 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 2

Другим вариантом, который проще поддерживать, является сохранение маршрутов в виде объектов, похожих на JSON, в массиве, а затем их повторение.

rout.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')
);

Answer 3

Router - это просто компонент React, который допускает children проп. Визуализируйте ваши маршруты как компонент:

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

Вот пример рабочих кодов и коробка для воспроизведения: https://codesandbox.io/s/ywvn59y7rj