reactjs - 如何使用 React 创建主详细信息页面

Question

如何使用 ReactJs 创建 Master/Detail。我有以下代码显示来自 Json 的记录文件，但我需要有关如何使用创建详细信息页面的帮助。

Answer 1

请看看这个:

1.) 如果你还没有安装 react-router-dom，你必须使用 npm 安装 react-router-dom:

npm install --save react-router-dom

2.) 导入路由，从 react-router-dom 切换模块并初始化路由，如下所示:

import { Redirect, Route, Switch } from 'react-router-dom';

const Routes = ({ match }) => (
  <Switch>
    <Route path={`${match.url}/fetchdata`} component={FetchData} />
    <Route path={`${match.url}/employee/detail`} component={EmployeeDetail} />
  </Switch>
);
export default Routes;

3.) 在 FetchData 组件更新如下:

import React, {Component} from 'react';
import { withRouter } from 'react-router-dom';

class FetchData extends Component{
  constructor(props){
    super(props);
    this.state={}
  }
  navigateToDetailPage = (empId) =>{
    const {history} = this.props;
    history.push('.employee/detail', { id: empId });
  }

  render(){
    return(
      <Button title="View detail" onPress={() => navigateToDetailPage(results.Employee_Number)} /> 

    );
  }
}
export default FetchData;

4.) 在 EmployeeDetail 组件中，您可以获得如下数据:

import { withRouter } from 'react-router-dom';

const EmployeeDetail = (props) => {
  const {  location } = props;
    const { id } = location.state;

}
export default withRouter(EmployeeDetail);