ReactJS中如何为数组内各元素创建独立页面并实现选中元素的页面跳转

嘿，恭喜你已经搞定了多选复选框的功能！接下来要实现跳转和每个学院的独立页面，咱们一步步来解决：

1. 优化学院数据结构 #

首先，把原来的字符串数组改成对象数组，给每个学院添加一个slug（友好的路由路径）和后续要展示的描述信息，这样能更方便地对应路由和页面内容：

optionsInstitutes = [
  { name: 'Administrasjon og ledelse', slug: 'administrasjon-og-ledelse', description: '这里是行政管理学院的详细介绍，包含领导力培养、组织管理等核心课程...' },
  { name: 'Datateknologi', slug: 'datateknologi', description: '数据技术学院专注编程、数据库、人工智能等领域，提供前沿技术课程...' },
  { name: 'Helse- og sosialfag', slug: 'helse-og-sosialfag', description: '健康与社会学院涵盖护理、社会工作等专业，培养行业实用人才...' },
  // 剩下的学院依次按照这个格式补充
  { name: 'Økonomi og juss', slug: 'okonomi-og-juss', description: '经济与法律学院提供经济学、法学等专业课程，助力职业发展...' }
];

2. 修改原Institute组件，添加选中状态和跳转按钮 #

需要在组件的state里保存选中的学院，同时添加按钮和跳转逻辑。另外要用到react-router-dom来实现页面跳转，记得先安装它：npm install react-router-dom

import React, { Component } from 'react';
import { Autocomplete, Checkbox, TextField } from '@mui/material';
import { withRouter } from 'react-router-dom'; // 导入路由高阶组件

class Institute extends Component {
  constructor(props) {
    super(props);
    this.state = {
      optionsInstitute: [],
      isLoaded: false,
      selectedInstitutes: [] // 新增：保存选中的学院
    }
  }

  // 优化后的学院数据
  optionsInstitutes = [
    { name: 'Administrasjon og ledelse', slug: 'administrasjon-og-ledelse', description: '这里是行政管理学院的详细介绍...' },
    { name: 'Datateknologi', slug: 'datateknologi', description: '数据技术学院专注编程、数据库...' },
    // 其他学院省略...
  ];

  // 处理跳转逻辑
  handleNavigate = () => {
    // 这里默认跳转到第一个选中的学院（如果是多选，你也可以改成打开多个新标签页）
    const firstSelected = this.state.selectedInstitutes[0];
    if (firstSelected) {
      this.props.history.push(`/institute/${firstSelected.slug}`);
    }

    // 如果要打开所有选中的学院页面（新标签），可以用下面的代码：
    // this.state.selectedInstitutes.forEach(institute => {
    //   window.open(`/institute/${institute.slug}`, '_blank');
    // });
  };

  render() {
    return (
      <div style={{marginLeft: '7%', marginTop: '60px'}}>
        <h1>Institute</h1>
        <Autocomplete
          multiple
          id="checkboxes-tags-demo"
          options={this.optionsInstitutes}
          getOptionLabel={(option) => option.name} // 指定显示学院名称
          value={this.state.selectedInstitutes}
          onChange={(event, newValue) => {
            this.setState({ selectedInstitutes: newValue }); // 更新选中状态
          }}
          renderOption={(option, {selected}) => (
            <React.Fragment>
              <Checkbox style={{marginRight: 8}} checked={selected} />
              {option.name}
            </React.Fragment>
          )}
          style={{width: 500}}
          renderInput={(params) => (
            <TextField {...params} variant="outlined" label="Checkboxes" placeholder="Favorites"/>
          )}
        />
        {/* 新增跳转按钮 */}
        <button 
          onClick={this.handleNavigate}
          style={{ marginTop: '16px', padding: '8px 16px', cursor: 'pointer' }}
          disabled={this.state.selectedInstitutes.length === 0} // 没选中时禁用按钮
        >
          查看选中学院详情
        </button>
      </div>
    )
  }
}

// 用withRouter包裹组件，才能拿到路由跳转的history对象
export default withRouter(Institute);

3. 创建学院详情页面组件 #

新建一个InstituteDetail.js文件，用来展示单个学院的内容：

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

class InstituteDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentInstitute: null
    };
  }

  componentDidMount() {
    // 根据路由里的slug，匹配对应的学院数据
    const { slug } = this.props.match.params;
    const allInstitutes = [
      { name: 'Administrasjon og ledelse', slug: 'administrasjon-og-ledelse', description: '这里是行政管理学院的详细介绍，包含领导力培养、组织管理等核心课程...' },
      { name: 'Datateknologi', slug: 'datateknologi', description: '数据技术学院专注编程、数据库、人工智能等领域，提供前沿技术课程...' },
      // 其他学院省略...
    ];
    const institute = allInstitutes.find(item => item.slug === slug);
    this.setState({ currentInstitute: institute });
  }

  render() {
    const { currentInstitute } = this.state;
    if (!currentInstitute) {
      return <div style={{ margin: '60px 7%' }}>抱歉，未找到该学院</div>;
    }
    return (
      <div style={{ margin: '60px 7%' }}>
        <h1>{currentInstitute.name}</h1>
        <p style={{ fontSize: '16px', lineHeight: '1.8' }}>{currentInstitute.description}</p>
        {/* 这里可以添加更多学院内容，比如课程列表、师资介绍等 */}
      </div>
    );
  }
}

export default withRouter(InstituteDetail);

4. 配置路由 #

在你的根组件（比如App.js）里设置路由规则，把学院列表页和详情页关联起来：

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Institute from './Institute';
import InstituteDetail from './InstituteDetail';

function App() {
  return (
    <Router>
      <Switch>
        {/* 学院详情页路由 */}
        <Route path="/institute/:slug" component={InstituteDetail} />
        {/* 默认显示学院列表页 */}
        <Route path="/" component={Institute} />
      </Switch>
    </Router>
  );
}

export default App;

这样一来，你选中学院后点击按钮，就能跳转到对应的详情页面啦！如果后续需要扩展学院内容，直接在optionsInstitutes里补充数据即可。

内容的提问来源于stack exchange，提问作者Nani