@Danila232

Ошибка с роутингом по клику на карточку (react-router6)?

Делал роутинг в своём приложении на router 6, есть карточки с персонажами, по клику на каждую карточку - бесшовный переход на страницу этой карточки. Но сейчас - когда нажимаешь на карточку выдаёт ошибку, но нужный путь в адресной строке добавляется. То есть кликаешь на карточку - ошибка, но в адресную строку добавляется нужный путь, и когда закрываешь окно ошибки и нажимаешь на enter - переходишь на нужную страницу. То есть роутинг работает, НО он работает не по клику, а только если зайти в адресную строку и нажать enter, почему такое может быть?

//App.jsx 
const App = () => { 
 
    return (
        
        <BrowserRouter>
            <div className="app">
                <AppHeader/>
                <main>

                    <Routes>

                        <Route path='charackters/:personId' element={<PersonPage/>} />

                    </Routes>

                </main>
            </div>
        </BrowserRouter>
    )

}
export default App;


// CharList.jsx - компонент, который возвращает список карточек-ссылок 
const CharList = (props) => {

    const [dataCards, setDataCards] = useState(0)

    useEffect(() => {
        getCharackters().then(
            info => setDataCards(info.data.results)   // getCharackters() - делает запрос к API и возвращает список данных
        )
    }, []) 


    const cardDataList = Array.from(dataCards);  
    const cards = cardDataList.map(card => {
    let [ name, description, image,  personId ] = [card.name, card.description, card.thumbnail.path + '.' + card.thumbnail.extension, card.id]
        return (
            <NavLink to={`charackters/${personId}`}>                    
                <li
                    className="char__item" 
                    key={card.id} 
                    // onClick={() => {props.setCharacterId(card.id)}}
                >
                   
                    <img src={image} alt="abyss"/>
                    <h3 className="char__name">{name}</h3>
                    <p className='char__descr'>{description}</p>
                </li>
            </NavLink>
        )
    }) 

    return(
        <ul className="char__list">
            {cards}
        </ul> 
    )
 
}
export default CharList;


//PersonPage  - компонент отдельных страниц, рендерящийся по клику на карточки(а сейчас не по клику, а по enter)
export const PersonPage = () => {

    const { personId } = useParams()
    const [person, setPerson] = useState(0)

    useEffect(() => {
        getPersonInfo()
    }, [personId])

    function getPersonInfo(){
        getOneCharackter(personId).then(
            data => setPerson(
                {
                title: data.data.results[0].name,
                }
            )
        )
    }

    return(
        <>
            <h1>
                Charackter's Separate Page:
            </h1>
            <p>
                Title: {person.title}
            </p>
            <p>
                ID: {personId}
            </p>
        </>
    )

}

*импорты я везде опустил, с ними там всё норм

Ошибка:
664468aca820b916552347.png
  • Вопрос задан
  • 67 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы