ReactJS路由器问题

Question

我想创建一个小型Spa，它有一个侧面导航。

侧面导航需要从类别使用API​​创建：

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

这个API将提供一个侧面导航：

• 狗
• 猫

我想创作什么te

我希望side nav能够处理来自api的任何数量的类别，例如，如果api包含狗，猫，乌龟，鸟等，它必须能够处理类别。

而且，我想要的网址是 /宠物/ 类别类型

例如：

如果用户点击狗

/宠物/狗

我尝试

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; 

Answer 1

你做得很好......你可以把所有相同的代码，除了改变Link到

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

，让你想怎么布局。虽然组件并未进入链接，但是您在响应的主要组件中声明路由，如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!' 
    } 
} 

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