Javascript 如何编写SEO友好URL的动态路由'；反应JS中的s

我使用redux加载了动态类别数据，数据如下：

const categories = [
    { id: 1, name: 'Luxury Boats', url: 'luxury-boat-hire' },
    { id: 2, name: 'Super Yacht Hire', url: 'super-yacht-hire' },
    { id: 3, name: 'Whitsundays', url: 'luxury-boat-hire-whitsundays' },
    { id: 4, name: 'New Years Eve Cruises', url: 'new-years-eve-cruises' }
];
 

我创建了一个名为Category.js的组件。我必须写路由器代码来覆盖URL。根据路由器

<Router path=”/category/:id” exact component={Category} />

但我想创建一个如下所示的URL，还想在Category.js组件中获取id参数

Id:1 => http://localhost:3000/category/1   => http://localhost:3000/luxury-boat-hire
Id:2 => http://localhost:3000/category/2  => http://localhost:3000/super-yacht-hire
Id:3 => http://localhost:3000/category/3  => http://localhost:3000/luxury-boat-hire-whitsundays
Id:4 => http://localhost:3000/category/4  => http://localhost:3000/ new-years-eve-cruises

如果我将传递category.url而不是category.id，那么如何在category.js组件中获取id属性以获取类别详细信息和与此类别关联的所有产品？我想在分类组件中获得id参数，并在搜索引擎优化友好的URL

对于具有固定URL的页面，可以传递props={category.id}。每个页面的URL都会更改，类别数据是从mysql数据库的json数据加载的。我读了你的帖子，你只有固定的URL/aboutus。但在我的例子中，所有URL、类别名称和ID都是从数据库加载的

当我使用以下代码将id传递给Category组件时，URL第一次工作，但当我们刷新页面时，categoryid变为空：

                to={{
                    pathname: props.link,
                    categoryid: props.id
                }}

---

请帮助为此编写代码

只需映射到url而不是category.id

{
  Categories.map(category => {
    return <NavLink to={`${category.url}`}>{category.name}</NavLink>
  });
}

{
Categories.map（category=>{
返回{category.name}
});
}

只需映射到url而不是category.id

{
  Categories.map(category => {
    return <NavLink to={`${category.url}`}>{category.name}</NavLink>
  });
}

{
Categories.map（category=>{
返回{category.name}
});
}

只需使用

category.url

而不是

category.id

？您可以使用

path=“/：cat”

和

categories.find（cat=>this.props.params.match.cat==cat.url）

作为旁注；您没有提到是否使用服务器端渲染。如果不是，你的搜索引擎优化友好的网址将不会真的重要。他们仍然会对SEO不友好。只需使用

category.url

而不是

category.id

？您可以使用

path=“/：cat”

和

categories.find（cat=>this.props.params.match.cat==cat.url）作为旁注；您没有提到是否使用服务器端渲染。如果不是，你的搜索引擎优化友好的网址将不会真的重要。他们仍然会对SEO不友好。你可以通过navlink传递道具：查看此链接：你可以通过navlink传递道具：查看此链接：
{
  Categories.map(category => {
    return <NavLink to={`${category.url}`}>{category.name}</NavLink>
  });
}