react-router 路由的基本使用

创建安装

1、新建一个react应用。
npx create-react-app my-app
cd my-app
npm start
2、删除不需要的文件及引用。

3、安装react-router-dom

npm install react-router-dom@版本号

注：不加版本号默认最新版
官网链接：reactrouter.com/en/6.6.0/up…

使用

看下v5的用法：

import { BrowserRouter as Router, Route, Switch} from 'react-router-dom'
function App() {
  return (
    <Router>
        <div className="App">
            <Navbar />
            <div>
                <Switch>
                    <Route exact path="/">
                        <Home />
                    </Route>
                    <Route path='/details/:id'>
                        <Details />
                    </Route>
                    <Route path="*">
                        <NotFound />
                    </Route>
                </Switch>
            </div>
        </div>
    </Router>
  );
}

v6的用法：(官网示例）

// This is a React Router v6 app
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users/*" element={<Users />} />
      </Routes>
    </BrowserRouter>
  );
}

function Users() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

      <Routes>
        <Route path=":id" element={<UserProfile />} />
        <Route path="me" element={<OwnUserProfile />} />
      </Routes>
    </div>
  );
}

注：绑定的element要写成<Home />这种組件形式

Link和NavLink区别

看个例子：

import { BrowserRouter, Routes, Route, NavLink,Link} from "react-router-dom";
import Home from './pages/Home'
import About from "./pages/About";
function App() {
  return (
    <BrowserRouter>
      <header>
        <nav>
          <h1>React-router</h1>
          // Link
          <Link to="/">Home</Link>
          // NavLink
          <NavLink to="about">About</NavLink>
        </nav>
      </header>
      <main>
        <Routes>
          <Route index element={<Home />}></Route>
          <Route path="about" element={<About />}></Route>
        </Routes>
      </main>
    </BrowserRouter>
  );
}

export default App;

看下效果：

结论：Home页面用的Link， About页面用的NavLink。用NavLink处于当前页面时会添加active类，Link不会。我们可以在需要的时候修改active类的样式来实现我们想要的效果。

以上使用的是BrowserRouter。官网推荐我们使用createBrowserRouter(v6.4提供的新api)。
使用createBrowserRouter创建路由，传给<RouterProvider router={router} />这个组件。
使用这种方式改写上面代码：

import { Route, createBrowserRouter,createRoutesFromElements,RouterProvider } from "react-router-dom";
import Home from './pages/Home'
import About from "./pages/About";
import NotFound from './pages/NotFound';
import HeaderLayout from './layouts/HeaderLayout'
const router = createBrowserRouter(
    createRoutesFromElements(
        <Route path="/" element={<HeaderLayout />}>
            <Route index element={<Home />}></Route>
            <Route path="about" element={<About />}></Route>
            // 上面的路由都没有匹配到，就会走到这里，这里自定义了一个404页面。
            <Route path="*" element={<NotFound />}<Route>
        </Route>
    )
)
function App() {
  return (
     <RouterProvider router={router} />
  );
}

export default App;

把上面header部分写到了一个新的文件中: layouts/HeaderLayout.js 代码如下：

import { Outlet, NavLink } from "react-router-dom";

export default function RootLayout() {
    return (
        <div className="root-layout">
            <header>
                <nav>
                    <h1>React-router</h1>
                    <NavLink to="/">Home</NavLink>
                    <NavLink to="about">About</NavLink>
                </nav>
            </header>
            <main>
            // 加上这个才能显示home和about页面的内容，否则只显示header部分。
                <Outlet />
            </main>
        </div>
    )
}

<OutLet />被用在父路由元素中来渲染他们的子路由元素。这允许在渲染子路由时显示嵌套UI。如果父路由完全匹配，它将渲染一个子索引路由，如果没有索引路由，则什么也不渲染。
注：path='about',不用添加 / ，会自动添加

看下效果：

ok，没有变化。

结语

以上是react-router的最基本的使用。更多的内容可以去看官网。