React Router

React Router

2021/08/12 (新增連結)

Route

Dynamic routing

React Router v6

  • React Router v6 in Three Minutes: Learn what’s coming in the latest alpha

    • Switch to Routes

    • Nested and Relative Routes With Automatic Route Matching

    • Relative Links

    • Descendant Routes

    • useRoutes

    • useNavigate Instead of useHistory

  • A Sneak Peek at React Router v6

    • <Switch> is becoming <Routes>

    • Big Changes with <Route>

      • The component/render prop will be substituted for the element prop

    • Nested Routes are Simpler

    • useNavigate Instead of useHistory

    • From 20kb to 8kb

  • What’s new in React Router V6

    • <Routes> is the new <Switch>

    • <Route component> is replaced with <Route element>

    • No more exact and strict props

    • Relative paths and links

    • Easier Nested Routes

    • Future-ready useNavigate instead of useHistory

    • Bundle size — 28.4 kB to 10.2 kB

  • What’s New In React Router 6

    • Routes Replaces Switch

    • Routes and Links are relative to their parent

    • Object-based routes

      • useRouter

    • Smaller Bundle Size

    • Suspense Ready Navigation

      • useNavigate

  • What’s New in React Router v6?

React Router v5

// before

function BlogPost({ match, location, history }) {

let { slug } = match.params

// ...

}


// after

function BlogPost() {

let { slug } = useParams()

let location = useLocation()

let history = useHistory()

// ...

}

React Router v4

Async

  • Async React using React Router & Suspense

    • The Asynchronous (lazy) Way

    • Asynchronous React Router

    • ** There’s currently an issue with react-router v4.4.0 where it doesn’t handle the case of a lazy-loaded or memoized component passed in through the component prop on Route.

Hooks

Nested routes

Private route / Authenticated routes

Redux & Router

React Router v3

Reach Router

React Location