Breaking News: Grepper is joining You.com. Read the official announcement!

react-router : preventing transitions

Jealous Jaguar answered on February 10, 2023 Popularity 3/10 Helpfulness 1/10

answer react-router : preventing transitions

react-router : preventing transitions

Comment

Using Navigate , preventing transitions

const Person = () => {
  const { id } = useParams()
  const person = users.find((p) => p.id === Number(id))
return (
    <div>
      <h3>{person.name}’s Friends</h3>
      <ul>
        {person.friends.map((id) => (
          <li key={id}>
            <Link to={id}>
              {users.find((p) => p.id === id).name}
            </Link>
          </li>
        ))}
      </ul>
      <Routes>
        <Route path={`:id/*`} element={<Person />} />
      </Routes>
    </div>
  )
}
export default function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Navigate to="/0" />} />
        <Route path="/:id/*" element={<Person />} />
      </Routes>
    </Router>
  )
}

Popularity 3/10 Helpfulness 1/10 Language whatever

Source: denislistiadi.medium.com

Tags: react-router transitions whatever

Link to this answer
Share Copy Link