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

Question

I'm new to programming and especially to React.JS. I managed to make checkboxes with an array of elements such as:

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']

the image of the checkbox I made looks as follows:

Heres, the code for the checkbox:

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>

Now the problem is, I want to make a button, onClick, that can take me to the page of the chosen array element(institute). I need each of the elements in the array to have their own page because I'm going to explain and list what each institute can offer. Thank You!

Answer 1

You can achieve this easily with react-router https://reactrouter.com/web/guides/quick-start

And there are plenty of tutorials to work with it: https://www.freecodecamp.org/news/react-router-in-5-minutes/