React Router does not switch pages - reactjs

Question

I have a search bar and when I type in smth I see fetch movie list. then I click on the details button to see a description of according film, url changes but new component does not render. IDK why. Just when I click on according card item and as soon as I refresh the page it shows me the rendered Details page. Another issue that I receive props and param (imdbID) How to show all the details that were passed by 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>
</>
);
}
Here is my details page
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

If you want to render this component and hide other then use the switch in 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>