Reactjs React路由器不交换页面

我有一个搜索栏，当我在smth中输入时，我会看到电影列表。然后我点击details按钮查看相应电影的描述，url发生了变化，但新组件没有呈现。我不知道为什么。当我点击相应的卡片项目时，只要我刷新页面，它就会显示呈现的详细信息页面。另一个问题是，我收到props和param（imdbID）如何显示props传递的所有细节-{films}

function App() {

  const [searchText, setSearchText] = useState('')
  const [films, setFilms] = useState([])
 
  const url = `http://www.omdbapi.com/?i=tt7286456&apikey=KEY&s=${searchText}`


   const onTextChange = async (e) => {
     setSearchText(e.target.value)
     const res = await axios.get(url)
   
     setFilms(res.data.Search)
     console.log(films)
   }
   
   const history = createMemoryHistory()
  return (
    <>
          <Router>
        <Container>
            <h1 className='mt-4'>MovieStore</h1>
            <Row>
          
            <input 
                   style={{width: '90%', margin: '0 auto'}}
                   type='text'
                   placeholder='Try look for harry... or whatever film you like...'
                   name="searchText"
                   onChange={onTextChange}
                   value={searchText}
                   className='mt-4 mb-4'
                 
            />
           
              
            </Row>
            <Row style={{color: "#000"}}>
              { films?.map(item => {
                return (
                  <Col lg={3} md={3} sm={12} key={item.imdbID} >
                        
                          <Card style={{height: 'calc(100% - 10px)' }}>
                          <Card.Img variant="top" src={item["Poster"]} style={{ objectFit: 'cover' }}/>
                          <Card.Body>
                            <Card.Title>{item["Title"]}</Card.Title>
                            <Card.Text>
                            {item["Year"]}
                            </Card.Text>
                            <Link to={`/film/${item.imdbID}`}><Button variant="primary">Details</Button></Link>
                          </Card.Body>
                        </Card>
                  </Col>

                )
              })}
        
            </Row>
        </Container>

        <Route exact path='/film/:imdbID' render={(props) => <DetailPage films={films} {...props} />}/>
      </Router>
    </>
  );
}

函数应用程序（）{
常量[searchText，setSearchText]=useState（“”）
const[films，setFilms]=useState（[]）
常量url=`http://www.omdbapi.com/?i=tt7286456&apikey=KEY&s=${searchText}`
const onTextChange=async（e）=>{
setSearchText（如目标值）
const res=等待axios.get（url）
setFilms（res.data.Search）
控制台日志（电影）
}
const history=createMemoryHistory（）
返回(
电影商店
{films？.map（项目=>{
返回(
{项目[“标题”]}
{项目[“年]}
细节
)
})}
}/>
);
}

这是我的详细信息页面

const DetailsPage = ({films}) => {

    const history = useHistory();
    const location = useLocation();

    const { id } = useParams()
    console.log('props', id)
    return (
        <Container>
            <Row>
                <Col>
                <Card style={{ width: '50%' }} className='mt-4'>
      
                <Card.Body>
                    <Card.Title>Movie title: {id}</Card.Title>
                    <Card.Text>
                
                    </Card.Text>
                    <Button style={{background: '#CE0A03', border: 'none' }} variant="primary" onClick={() => history.goBack() }>Go on main page</Button>
                </Card.Body>
                </Card>
                            
    
                </Col>
            </Row>
        </Container>
    )
}

const DetailsPage=（{films}）=>{
const history=useHistory（）；
const location=useLocation（）；
const{id}=useParams（）
console.log（'props'，id）
返回(
电影名称：{id}
history.goBack（）}>转到主页面
)
}

如果要渲染此组件并隐藏其他组件，请使用react router中的交换机

<Router>
       <Switch>
        <Route exact path='/'>
        <Container>
            <h1 className='mt-4'>MovieStore</h1>
            <Row>
          
            <input 
                   style={{width: '90%', margin: '0 auto'}}
                   type='text'
                   placeholder='Try look for harry... or whatever film you like...'
                   name="searchText"
                   onChange={onTextChange}
                   value={searchText}
                   className='mt-4 mb-4'
                 
            />
           
              
            </Row>
            <Row style={{color: "#000"}}>
              { films?.map(item => {
                return (
                  <Col lg={3} md={3} sm={12} key={item.imdbID} >
                        
                          <Card style={{height: 'calc(100% - 10px)' }}>
                          <Card.Img variant="top" src={item["Poster"]} style={{ objectFit: 'cover' }}/>
                          <Card.Body>
                            <Card.Title>{item["Title"]}</Card.Title>
                            <Card.Text>
                            {item["Year"]}
                            </Card.Text>
                            <Link to={`/film/${item.imdbID}`}><Button variant="primary">Details</Button></Link>
                          </Card.Body>
                        </Card>
                  </Col>

                )
              })}
        
            </Row>
        </Container>
   </Route>

        <Route exact path='/film/:imdbID' render={(props) => <DetailPage films={films} {...props} />}/>
   <Switch>
      </Router>

电影商店
{films？.map（项目=>{
返回(
{项目[“标题”]}
{项目[“年]}
细节
)
})}
}/>