反应路由器和漂亮的URL

时间:2017-04-10 10:28:29

标签: reactjs react-router single-page-application react-router-redux

react-router与漂亮的网址一起使用的最佳方式是什么? 所有网址都存储在数据库中(总金额约为400,000)。 当我关注链接时,我需要通过AJAX请求解析从服务器渲染的组件并进行渲染。

谢谢!

2 个答案:

答案 0 :(得分:2)

我找到了问题的答案。使用getComponent,您可以使用Route import ProductPage from '...' import CategoryPage from '...' const MAP_PAGE_TYPE_TO_COMPONENT = { 'productPage': ProductPage, 'categoryPage': CategoryPage }; .... const getComponent = (location, callback) => { requestToServer(location.pathname) .then(function(response){ const Component = MAP_PAGE_TYPE_TO_COMPONENT[response.pageType]; callback(null, <Component items = { response.items } />); }) .catch(callback) }; .... <Route path='*' getComponent = { getComponent } /> 方法动态解析组件。 例如:

callback

如果没有错误,则应将null函数调用<Component />作为第一个参数,将com.android.support:support-v4:24.1.1+作为第二个参数。

答案 1 :(得分:1)

React路由器可以采用可以由数据库驱动的动态值。

例如,如果您有产品数据库,则可以使用以下链接:

<Link to="/products/1234/product_name">Product</Link>

你的组件定义如下:

<Route path="/products/:id/:url_title" component={Products} />