React Router DOM v6: Installation, Simple, Nested, Index, and Parameterized Routing with Full Code Examples

This guide demonstrates the usage of react-router-dom (v6) in a React project, covering installation, simple routing, nested routes, index routes, unmatched routes, route parameters, search parameters, custom link components, and programmatic navigation.

Installation

First install the library using npm or yarn:

# npm
npm install react-router-dom@6
# yarn
yarn add react-router-dom@6

Simple Routing

Define routes by specifying a path for each component. The example below switches between two tabs:

import { Link } from 'react-router-dom';
function App() {
  return (
路由练习
{/* link renders as an
tag */}
Tab1
Tab2
);
}
export default function Tab1() {
  return (
我是Tab1
);
}
export default function Tab2() {
  return (
我是Tab2
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
} />
} />
} />
);

Nested Routes

Use Outlet in a parent component to render child routes without overwriting the parent UI.

import { Link, Outlet } from 'react-router-dom';
function App() {
  return (
路由练习
Tab1
Tab2
{/* placeholder for child routes */}
);
}

Index Route

An index route acts as the default child when no other child matches. It is defined with the index attribute and no path .

root.render(
}>
} />
}>
请选择一个笔记查看它的详情
} />
} />
未匹配到该路由请先设置路由页面
} />
);

Unmatched Route

Use path='*' to catch all unmatched URLs and display a fallback UI.

Route Parameters

Pass dynamic values via the URL (e.g., /Tab2/20220103 ) and retrieve them with useParams :

import { useParams } from 'react-router-dom';
export function ItemDetail() {
  let params = useParams();
  let content = findTodoItem(parseInt(params.itemId)).content;
  return (
笔记详情
这是我于{params.itemId}记录的笔记，内容为{content}
);
}

Search Parameters

Search params (e.g., /login?success=1 ) are accessed via useSearchParams . The example filters a list based on the text query.

let [searchParams, setSearchParams] = useSearchParams();
{
  let text = e.target.value;
  if (text) setSearchParams({text}); else setSearchParams({});
}} />
{list.filter(item => {
    let txt = searchParams.get('text');
    if (!txt) return true;
    return item.content.startsWith(txt);
  }).map(item => (
({color: isActive ? "red" : ""})
               to={`/Tab2/${item.id}`}>{item.content}
))}

Custom Link Component (QueryLink)

Preserve existing search parameters when navigating by wrapping NavLink :

import React from 'react';
import { useLocation, NavLink } from "react-router-dom";
export default function QueryLink({to, ...props}) {
  let location = useLocation();
  return
;
}

Programmatic Navigation (useNavigate)

When navigation is triggered by non‑link elements (e.g., a button), use useNavigate together with useLocation to retain search params.

let navigate = useNavigate();
let location = useLocation();
{
  deleteTodoItem(params.itemId);
  navigate('/Tab2' + location.search);
}}>删除笔记

Reference

Official documentation: React Router v6 Tutorial