После обновления страницы пропадает её содержимое и появляется ошибка

Делаю проект в котором получаю списки фильмов по API. Написал код в котором вывожу список этих фильмов на странице и при клике на один из них прихожу на страницу в которой более детально рассказывается про этот фильм. Сделал это с помощью react-router-dom и при переходе на страницу "про фильм" адрес выглядит так: "http://localhost:8080/about/{название фильма}". Но если я обновлю страницу то вся информация пропадает. В консоле получаю такую ошибку: "GET http://localhost:8080/about/main.js net::ERR_ABORTED 404 (Not Found)" Насколько я понял это связано с тем что при переходе на страницу "про фильм" в props я получаю информацию которую перерабатываю и вывожу, a если обновить страницу то той информации которую я обрабатываю нет. Может можно это исправить с помощью prevProps? И ещё у меня перестали грузиться картинки в странице про фильм что тоже связано с путём.

Route

    <Switch>
        <Route path="/about/:name" children={<ChooseFilm />} />
    </Switch>

FilmCards(Здесь я перебираю и вывожу список фильмов и здесь ссылка на страницу "про фильм"). Ссылка выглядит так:

{this.props.listFilm.map((value,index)=>{
 let adressTitle = value.title.replace(/ /g,"-");// Получил название фильма и  заменил пробелы на - 
 <Link to={{
    pathname: `/about/${adressTitle}`,// Путь который указан в Route
      state: {
           moreAboutFilm,     //
           filmPoster,        // Передаю параметры которые мне понадобится на странице "про фильм"  
           filmId: value.id,  //
       }
 }}>
 </Link>
)})}

ChooseFilm

export default function ChooseFilm() {
    let {name} = useParams();
    let {state} = useLocation(); // Получаю данные которые я передал в Link и передаю на страницу "про фильм"
  return (
        <About 
            moreAboutFilm={state.moreAboutFilm}
            filmPoster={state.filmPoster}
            filmId={state.filmId}
        />
  );
}

About (Тут я перерабатываю параметры которые получил через Link и вывожу детальную информацию про фильм)

class About extends React.Component{
    constructor(props){
        super(props);
        this.state={
            detailsAboutFilm: [],
        }
    }


    filmDetails=()=>{
        fetch(this.props.moreAboutFilm)
        .then((moreDetails) => {
            return moreDetails.json(); 
        })
        .then((moreDetailsAboutFilm) => {
            let backgroundPath  = `https://image.tmdb.org/t/p/w500${moreDetailsAboutFilm.backdrop_path}`;
            let detailsAboutFilm = [moreDetailsAboutFilm];
            this.setState({
                detailsAboutFilm,
                backgroundPath: backgroundPath
            }) 
        });
    }

    componentDidMount(){
        this.filmDetails()
    }

    componentDidUpdate(prevProps){
        if (this.props.moreAboutFilm !== prevProps.moreAboutFilm) {
            this.filmDetails()
        }
    }

//И потом когда я получил filmDetails я перебираю его с помощью map и вывожу нужную мне информацию на странице.

Может можно как-нибудь после того как перезагрузилась страница сделать так чтобы не было ошибки а была информация которую я вывел. Спасибо!