## Routing Jump
In this chapter, you will learn how to implement refresh-free page navigation using React Router v6, including dynamic routing and parameter reading.
* * *
## Why Use Routing?
Traditional multi-page websites require requesting a new page from the server each time a link is clicked, resulting in white screen flickering.
Frontend routing allows JS to control which component to display when the URL changes, without sending requests to the server.
Benefits: Smooth transitions, experience like a native APP.
* * *
## React Router v6 Core Concepts
| Concept | Purpose | Corresponding Code |
| --- | --- | --- |
| Route Table | Defines URL to component mapping | ` + ` |
| Route Outlet | Placeholder position for sub-route display | `` |
| Navigation Link | Click to navigate | `` |
| Dynamic Routing | Variables in URL | `/post/:id` |
| Reading Parameters | Get values from dynamic routes | `useParams()` |
* * *
## Installation and Configuration
$ npm install react-router-dom@6
### Create Route Configuration
## Example
// File path: src/router/index.jsx
import{ createBrowserRouter } from 'react-router-dom'
import App from '../App'
import HomePage from '../pages/HomePage'
import PostPage from '../pages/PostPage'
// createBrowserRouter create router instance
const router = createBrowserRouter([
{
path:'/',// App as the root layout
element:,
children:[
{
index:true,// index: true represents the default child route for the / path
element:
},
{
path:'post/:id',// Dynamic RouteοΌ:id matches any value
element:
}
]
}
])
export default router
> Two routing modes: createBrowserRouter produces clean URLs (/post/1), requiring server configuration. If the deployment environment is uncertain, use createHashRouter, which includes # in the URL (/#/post/1) and requires no server configuration.
### Register Routes in main.jsx
## Example
// File path: src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import{ RouterProvider } from 'react-router-dom'
import router from './router'
import'./index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
{/* RouterProvider inject the router into the application */}
)
### Use Outlet in App.jsx
## Example
// File Path: src/App.jsx
import{ Outlet } from 'react-router-dom'
import NavBar from './components/NavBar'
import'./App.css'
function App(){
return(
{/* Outlet is the outlet for nested routes: components matched by child routes will be rendered here */}
YouTip