例如，我有一個菌株列表，每個菌株都位于從 react-router-dom 導入的組件中。我希望此鏈接將我帶到 Route path='/strains/{strain}'。在這個頁面上，我只想渲染被點擊的菌株的名稱，但是當點擊一個鏈接時，所有菌株的名稱都會被渲染。這是我顯示所有路線的代碼。import React, {useEffect, useState} from 'react';import { Route, Link } from 'react-router-dom';import axios from 'axios';import UserCreation from './components/UserCreation';import Login from "./components/Login";import StrainCard from './components/StrainCard';import { Container } from "reactstrap";import NavBarComponent from "./components/NavBarComponent";import SavedStrain from './components/SavedStrain';import Strain from './components/Strain';import StrainDetails from './components/StrainDetails';function App() {  const [strains, setStrains] = useState([]);  const [savedList, setSavedList] = useState([]);  const [strain, setStrain] = useState([]);    useEffect(() => {    const getStrains = () => {      axios        .get('http://strainapi.evanbusse.com/CEIl7eN/strains/search/all')        .then(response => {          console.log(response);          setStrains(response.data);        })        .catch(error => {          console.error('Server Error', error.response);        });    }    getStrains();  }, []);console.log(strains)  useEffect(() => {    setStrain(Object.keys(strains).slice(0, 20))  }, [strains])  console.log(strain)  const addToSavedList = strain => {    setSavedList([...savedList, strain]);  };  return (    <Container className="App">        <NavBarComponent />      <Route exact path='/'>        <Link to='/login'>Log in</Link>      </Route>        <Route exact path='/login'>            <Login />        </Route>      <Route exact path='/signup'>        <UserCreation />      </Route>  );}export default App;