Делал роутинг в своём приложении на 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>
</>
)
}
*импорты я везде опустил, с ними там всё норм
Ошибка:
