例如一級頁面是投資機構列表膝藕,二級頁面是對應的投資項目列表
首先代碼引入react-router的BrowserRouter(重命名為Router)糙捺,Route队橙,Link,Switch 四個組件.
1.首先是有跳轉鏈接
{currentUser.authorities.includes('xxx管理') && (
<Link className={styles.button} to={`/companies/${record.id}`}>
投資總覽
</Link>
)}
2.路由控制
<Route
//match是一個匹配路徑參數(shù)的對象滥酥,它有一個屬性url,里面的內容
//就是路徑參數(shù),除常用的屬性外url畦幢,它還有params坎吻、path、isExact屬性
path={`${match.url}companies/:sid`}
component={StoreList}
/>
- 通過鏈接和路由控制跳轉到下一頁面宇葱,當組件加載完成后瘦真,顯示不同投資機構下的投資項目列表,故在生命周期中加入帶參數(shù)的fetch方法
componentDidMount() {
const debtorId = this.props.match.params.sid;
this.props.fetchStores({ debtorId: debtorId });
}
總結:在單頁面應用中使用react-router可以方便的實現(xiàn)頁面跳轉
結合redux使用可以滿足大部分項目的開發(fā)黍瞧。