时间戳

首页 > 解决方案 > React 中的动态页面路由

reactjs - React 中的动态页面路由

问题描述

您好，我正在尝试使用电子商店用例来学习 React。我在数据库中有 200 000 个项目，它们按类别分组。每个产品或每个产品类别都应该可以通过以下形式的 url 直接访问：

对于产品：
http://domain/product_name
http://domain/product_name2
等。

对于类别（代表菜单）
http://domain/laptops/gaming
将显示
product_name 和 product_name2 等。

由于类别和产品每晚都会添加/修改，因此必须“重新创建”路由器组件才能正确处理新产品和类别的路由，因为我没有使用 http://domain/product/product_name之类的路径...我不能使用静态路由

路径=/产品/:id ...

我有一个简单的 PHP rest api，它返回路径类型
http://domain/product_name ->type product
http://domain/laptops/gaming ->type section

基于这样，api我可以通过以下代码正确确定用于渲染对象的组件（删除了其余 api 调用以使代码尽可能简单）

import React from 'react';
import './App.css';
import {
  BrowserRouter as Router,
  Route
} from 'react-router-dom';
import ShowProduct from './components/showProduct.js'
import ShowSection from './components/showSection.js'

const PageLocator=({var1})=>{
        {/* determine from rest API if requested path is type of product or section

        if product */}
        return <div><ShowProduct product={var1.path} /></div>


        {/* if section */}
        return <div><ShowSection section={var1.path}

        {/* if etc...  */}
}

class App extends React.Component {


  render() {
    return(
                  <Router>
                    <div>
                        <PageLocator path="/" var1={{path:window.location.pathname}} />
                    </div>
                </Router>
    )
  }
}

上面的代码实际上符合我的预期。我面临的问题是，由于我对 React 的零经验，我无法验证解决方案是否正确，所以我想请人验证并最终建议我如何使用 React 处理这样的要求。

标签： reactjsreact-router

解决方案

推荐阅读