ReactJS中如何访问数组中的每个元素并为数组中的所有元素创建一个页面？

Question

我是编程新手，尤其是 React.JS。我设法用一组元素制作复选框，例如：

optionsInstitutes = ['Administrasjon og ledelse', 'Datateknologi', 'Helse-og sosialfag', “历史、宗教信仰”、“Idrettsfag”、“Ingeniør- og teknologiske fag”、“Kunstfag”、“Litteratur og språk”、“Lærerutdanning og pedagogikk”、“Media- og kommunikasjonsfag”、“Musikk”、“Realfag” , 'Samfunnsfag', 'Økonomi og juss']

the image of the checkbox I made looks as follows:

这里，复选框的代码：

export class Institute extends Component {


constructor(props) {
    super(props);
    this.state = {
        optionsInstitute: [],
        isLoaded: false,
    }
    
}



// Our sample dropdown options 
optionsInstitutes = [' Administrasjon og ledelse', 'Datateknologi', 'Helse- og sosialfag',
    'Historie, filosofi og religion', ' Idrettsfag', ' Ingeniør- og teknologiske fag', ' Kunstfag', ' Litteratur og språk', 'Lærerutdanning og pedagogikk', 'Media- og kommunikasjonsfag', 'Musikk', 'Realfag', 'Samfunnsfag', ' Økonomi og juss']




render() {

    return (

        <div style={{marginLeft: '7%', marginTop: '60px'}}>
            <h1>Institute</h1>
            <Autocomplete
                multiple
                id="checkboxes-tags-demo"
                options={this.optionsInstitutes}
                renderOption={(option, {selected}) => (
                    <React.Fragment>
                        <Checkbox
                            icon={icon}
                            checkedIcon={checkedIcon}
                            style={{marginRight: 8}}
                            checked={selected}
                        />
                        {option}
                    </React.Fragment>
                )}
                style={{width: 500}}
                renderInput={(params) => (
                    <TextField {...params} 
                               variant="outlined"
                               label="Checkboxes"
                               placeholder="Favorites"/>
                )}
            />

     </div>

现在的问题是，我想制作一个 onClick 按钮，它可以将我带到所选数组元素的页面（研究所）。我需要数组中的每个元素都有自己的页面，因为我将解释并列出每个机构可以提供的内容。谢谢！

Answer 1

您可以使用 react-router 轻松实现此目的 https://reactrouter.com/web/guides/quick-start

还有很多教程可以使用它：https://www.freecodecamp.org/news/react-router-in-5-minutes/