代码之家 › 专栏 › 技术社区 › Mizlul

如何在react中分离index.js的路由

react-router redux reactjs javascript

0

Mizlul · 技术社区 · 7 年前

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

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

my 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')
);

我会这样保存它,但我也希望将其分离为单个文件路由处理。

3 回复 | 直到 7 年前

1

2

0xc14m1z 7 年前

Router 只是一个反应组件,允许 children 支柱。将路由呈现为组件:

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

下面是要播放的示例工作代码和沙盒: https://codesandbox.io/s/ywvn59y7rj

2

1

Mizlul 7 年前

更详细的答案,将routes.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')
);

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

3

0

Philipp 7 年前

另一个更容易维护的选项是将路由作为类似JSON的对象存储在数组中,然后循环它们。

JS程序

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

索引文件

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