ReactJS 路由器问题

Posted 2023-02-22

【中文标题】ReactJS 路由器问题

【英文标题】：ReactJS Router problems

【发布时间】：2017-02-25 13:22:15

【问题描述】：

我想创建一个带有侧导航的小型水疗中心。

需要使用 api 从 category 创建侧导航：

[
  "category": "dogs",
  "available": [
   
     "name": "pedro",
     "breed": "chihuahua"
   ,
   
     "name": "roxane"
     "breed": "beagle"
   
  ]
 ,
 
  "category": "cat",
  "available": [
  
    "name": "garfield",
    "breed": "tobby"
  
 ]

此 api 将提供侧导航：

狗 猫

我想创造什么

我希望侧导航能够处理来自 api 的任意数量的类别，例如，如果 api 包含狗、猫、乌龟、鸟类等。它必须能够处理这些类别。

另外，我希望网址是 /pets/类别类型

示例：

如果用户点击狗

/宠物/狗

我的尝试

import React from 'react';
import  Router, Route, Link  from 'react-router';

import LayoutContent from './LayoutContent.jsx';

class SideNav extends React.Component 
 render() 
   return (
     <nav>
        <a>
           <Link to="/$this.props.data.name" component=LayoutContent>this.props.data.name</Link>
        </a>
     </nav>
    );
  


export default SideNav;

【参考方案1】：

你做得很好......你可以保留所有相同的代码，除了将Link更改为

<Link to=`/pets/$this.props.data.name`>this.props.data.name</Link>

获得你想要的布局。虽然组件没有进入链接，但您在 react 的主要组件中声明路由，例如 here。这是您指定组件的地方。

所以，假设您已经正确实现了路由，如下所示：

<Router history=browserHistory>
  <Route path="/" component=App>
    <IndexRoute component=Index/>
    <Route path="/pets/:cat" component=Category/>
  </Route>
</Route>

App 组件在哪里实现SideNav

然后，您可以引用route params 并像这样进行ajax 查询

class ShowCats extends Component 
  componentDidMount() 
    fetch(`/api/$this.props.params.cat`)
      .then(response => response.json())
      .then(json => this.setState(pets: json))
  
  render() 
    return this.state.pets ? this.state.pets : 'Fetching pets!'
  

可能不得不摆弄这个，但这是一般的想法！