React Router 不切换页面

Question

我有一个搜索栏，当我输入 smth 时，我会看到获取电影列表。然后我单击详细信息按钮查看相应电影的描述，url 更改但新组件未呈现。为什么。就在我点击相应的卡片项目时，一旦我刷新页面，它就会向我显示渲染的详细信息页面。我收到道具和参数（imdbID）的另一个问题如何显示道具传递的所有细节 - {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>
    </>
  );
}

这是我的详细信息页面

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>
    )
}

Answer 1

如果你想渲染这个组件并隐藏其他组件，请使用 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>