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!' 
    } 
} 

可能不得不擺弄這個，但這是一般的想法！