React路由最全使用(N)

最新推荐文章于 2023-10-12 20:29:56 发布
最新推荐文章于 2023-10-12 20:29:56 发布
阅读量2.1k 收藏 17
点赞数 2
分类专栏： react 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68658847/article/details/130499709
版权

文章目录

路由简介

概述

React Router 以三个不同的包发布到 npm 上，它们分别为：

  1. react-router: 路由的核心库，提供了很多的：组件、钩子。
  2. react-router-dom: 包含react-router所有内容，并添加一些专门用于 DOM 的组件，例如 <BrowserRouter>等 。
  3. react-router-native: 包括react-router所有内容，并添加一些专门用于ReactNative的API，例如:<NativeRouter>等。

变化

与React Router 5.x 版本相比，改变了什么？

  1. 内置组件的变化：移除<Switch/> ，新增 <Routes/>等。

  2. 语法的变化：component={About} 变为 element={<About/>}等。

  3. 新增多个hook：useParams、useNavigate、useMatch等。

  4. 官方推荐使用函数式组件

文档

官网地址：https://reactrouter.com/

路由组件

BrowserRouter

<BrowserRouter> 用于包裹整个应用。

import React from "react";
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    {/* 整体结构（通常为App组件） */}
  </BrowserRouter>
);

HashRouter

作用与<BrowserRouter>一样，但<HashRouter>修改的是地址栏的hash值。

备注：6.x版本中<HashRouter>、<BrowserRouter> 的用法与 5.x 相同。

Routes 与 Route

Routes是创建路由管理器， Route是创建路由对象

  • v6版本中移出了先前的<Switch>，引入了新的替代者：<Routes>。

  • <Routes> 和 <Route>要配合使用，且必须要用<Routes>包裹<Route>。

  • <Route> 相当于一个 if 语句，如果其路径与当前 URL 匹配，则呈现其对应的组件。

  • <Route caseSensitive> 属性用于指定：匹配时是否区分大小写（默认为 false）。

  • 当URL发生变化时，<Routes> 都会查看其所有子 <Route> 元素以找到最佳匹配并呈现组件 。

  • <Route> 也可以嵌套使用，且可配合useRoutes()配置 “路由表” ，但需要通过 <Outlet> 组件来渲染其子路由。

<Routes>
  {/* path定义路径，可以省略path前的/；element定义当前路径对应的组件 */}
  <Route path='/' element={<Home />} />
   
  {/* 
  路由嵌套：路由嵌套要写在路由配置页，渲染嵌套的路由组件的位置使用Outlet 
  friend 是一级路由，路径为 /friend 
  chat是二级路由，对应路径为 /friend/chat/张三
  */}
  <Route path='friend' element={<Friends />} />
 
    <Route path='chat/:name' element={<Chat />} />
  </Route>

  <Route path='setting' element={<Settings />} />
	
  {/* Route也可以不写element属性, 这时就是用于展示嵌套的路由，所对应的路径是/users/login */}
  <Route path="user">
    <Route path="login" element={<Login />} />
  </Route>

  {/* 当没有其他路由匹配该URL时，你可以使用path="*"渲染一个"未找到"的路由。这条路由将匹配任何URL，但优先级最低，因此路由器只有在没有其他路由匹配的情况下才会选择它 */}
  <Route path='*' element={<NotFound />} />
</Routes>

Link

<Link>修改URL，且不发送网络请求（路由链接）。

注意：<Link>外侧需要用<BrowserRouter>或<HashRouter>包裹。

import { Link } from "react-router-dom";

const App = () => {
	const [items, setItems] = useState([
		{ path: '/', title: '首页', conponent: Home },
		{ path: '/friend', title: '好友', conponent: Friends },
		{ path: '/setting', title: '设置', conponent: Settings },
	]);
  
	return (
		<div className='app'>
			<nav className='nav'>
				<div className='w'>
				{items.map(item => (
						<Link to={item.path} key={item.path}>
							{item.title}
						</Link>
					))}
				</div>
			</nav>
    </div>
	);
};

NavLink

<NavLink>与<Link>组件类似，且可实现导航的“高亮”效果。

  • NavLink组件和Link组件的功能是一致的，区别在于可以判断其to属性是否是当前匹配到的路由

  • NavLink组件的style或className可以接收一个函数，函数接收一个isActive参数，可根据该参数调整样式，处理高亮状态，NavLink默认类名是active，可以通过自定义类名或者样式实现高亮：

  • 自定义类名

<NavLink className={({ isActive }) => (isActive ? 'active' : '')} to={item.path} key={item.path}>
  {item.title}
</NavLink>
  • 自定义样式
<NavLink style={({ isActive }) => ({backgroundColor: isActive ? 'lightblue': ''})} to={item.path} key={item.path}>
  {item.title}
</NavLink>

默认情况下，当Home的子组件匹配成功，Home的导航也会高亮，

当NavLink上添加了end属性后，若Home的子组件匹配成功，则Home的导航没有高亮效果。

<NavLink to="home" end >home</NavLink>

Navigate

只要<Navigate>组件被渲染，就会修改路径，切换视图（重定向）。

<Navigate>的replace属性用于控制跳转模式（push 或 replace，默认是push）。

import { useState } from 'react';
import { Navigate } from 'react-router-dom';

const Home = props => {
	const [show, setShow] = useState(false);
	return (
		<div id='home' className='w'>
			<h1>首页</h1>
			{/* 根据show的值决定是否切换视图 */}
			{show && <Navigate to='/setting' replace={true} />}
			<button onClick={() => setShow(true)}>按钮</button>
		</div>
	);
};

Outlet

当<Route>产生嵌套时，渲染其对应的后续子路由。

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

const Friends = props => {
	const [items, setItems] = useState([
		{ name: 'Tom', id: 10 },
		{ name: 'Lily', id: 11 },
		{ name: 'Lucy', id: 12 },
	]);
	return (
		<div id='home' className='w'>
			<nav className='nav-home'>
				{items.map(item => {
					return (
						<NavLink className={({ isActive }) => (isActive ? 'active link' : 'link')} to={'/friend/chat/' + item.name} key={item.id}>
							{item.name}
						</NavLink>
					);
				})}
			</nav>
			{/* Outlet 渲染子路由组件 */}
			<Outlet className='child'></Outlet>
		</div>
	);
};

路由hooks

useRoutes()

作用：根据路由表，动态创建<Routes>和<Route>。它的作用是动态地配置路由，它接收一个路由数组，并使用匹配到的路由来渲染相应的组件。

useRoutes() 在功能上等同于 <Routes>，但它使用 JavaScript 对象而不是元素来定义路由。这些对象具有与 <Route> 组件相同的属性。

useRoutes()的返回值是可用于呈现路由树的有效 React 元素。

//路由表配置：src/routes/index.jsx
import { Navigate } from 'react-router-dom';

import Home from '../views/Home';
import Friend from '../views/Friend';
import Setting from '../views/Setting';
import NotFound from '../views/NotFound';
import Chat from '../views/Chat';

const routes = [
	{ path: '/', element: <Navigate to='/home' /> },
	{ path: '/home', element: <Home /> },
	{
		path: '/friend',
		element: <Friend />,
		children: [{ path: 'chat/:name', element: <Chat /> }],
	},
	{ path: '/setting', element: <Setting /> },
	{ path: '*', element: <NotFound /> },
];

export default routes;

// App.jsx

import { useState } from 'react';
import { NavLink, useRoutes } from 'react-router-dom';
import routes from './routes';

const App = () => {
  // 根据路由表生成对应的路由规则
  const ElementRouter = useRoutes(routes)
	const [items] = useState([
		{ path: '/home', title: '首页' },
		{ path: '/friend', title: '好友' },
		{ path: '/setting', title: '设置' },
	]);

	return (
		<div className='app'>
			<nav className='nav'>
				<div className='w'>
					{items.map(item => (
						<NavLink className={({ isActive }) => (isActive ? 'active' : '')} to={item.path} key={item.path}>
							{item.title}
						</NavLink>
					))}
				</div>
			</nav>
			{/* 注册路由 */}
			{ElementRouter}
		</div>
	);
};

useNavigate()

作用：返回一个函数用来实现编程式导航。

import { useNavigate } from 'react-router-dom';

function Chat(props) {
  const navigate = useNavigate();
	const goBack = () => {
    // 第一种使用方式：传入数值进行前进或后退，类似 history.go()方法
		// navigate(-1);
    
		// 第二种使用方式：指定具体的路径
		navigate('/friend', {
			replace: false,
			state: { a: 1, b: 2 },
		});
	};
	return (
		<div id="chat" className="w">
			<h2>chat页面 </h2>
      <button onClick={goBack}>返回</button>
		</div>
	);
}

useParams()

作用：回当前匹配路由的params参数。

import { useParams, useNavigate, useLocation } from 'react-router-dom';

function Chat(props) {
	// 获取路径参数
	const params = useParams();
	return (
		<div id='chat' className='w'>
      <h2>chat页面</h2>
      <p>params.name： {params.name}</p>
		</div>
	);
}

const App = () => {
	return (
		<div className='app'>
			<Routes>
				<Route path='chat/:name' element={<Chat />} />
			</Routes>
		</div>
	);
};

useLocation()

作用：获取当前 location 信息，对标5.x中的路由组件的location属性。

import { useLocation } from 'react-router-dom';

function Friend(props) {
	// 路由位置信息
	const location = useLocation();
	console.log(location);
  // {
  //   hash: "",
  //   key: "1nw4p3qf",
  //   pathname: "/friend",
  //   search: "?name=张三&age=18",
  //   state: {a: 1, b: 2},
  // }

	return (
		<div id='friend' className='w'>
			<h2>friend页面</h2>
		</div>
	);
}

useSearchParams()

作用：用于读取和修改当前位置的 URL 中的查询字符串。

返回一个包含两个值的数组，内容分别为：当前的seaech参数、更新search的函数。

function Chat(props) {
	const [search, setSearch] = useSearchParams();
	const name = search.get('name');
	const age = search.get('age');

	return (
		<div id='chat' className='w'>
			<h2>chat页面</h2>
			<button onClick={() => setSearch('name=张三&age=18')}>点击更新一下收到的search参数</button>
			<p> name={name} </p>
			<p> age={age} </p>
		</div>
	);
}

useMatch()

作用：返回当前匹配信息，对标5.x中的路由组件的match属性。

<Route path="/friend/chat/:name" element={<Chat />}/>
<NavLink to="/friend/chat/Tom">好友</NavLink>

function Chat(props) {
	const match = useMatch('/friend/chat/:name');
	console.log(match);
  // {
  //   params: { name: 'Tom' },
  //   pathname: "/friend/chat/Tom",
  //   pathnameBase: "/friend/chat/Tom",
  //   pattern: {path: '/friend/chat/:name', caseSensitive: false, end: true},
  // }

	return (
		<div id='chat' className='w'>
			<h2>chat页面</h2>
		</div>
	);
}

useInRouterContext()

作用：如果组件在 <Router> 的上下文中呈现，则 useInRouterContext 钩子返回 true，否则返回 false。

useNavigationType()

作用：返回当前的导航类型（用户是如何来到当前页面的）。

返回值：POP、PUSH、REPLACE。

备注：POP是指在浏览器中直接打开了这个路由组件（刷新页面）。

useOutlet()

作用：用来呈现当前组件中渲染的嵌套路由。

const result = useOutlet()
console.log(result)
// 如果嵌套路由没有挂载,则result为null
// 如果嵌套路由已经挂载,则展示嵌套的路由对象

useResolvedPath()

作用：给定一个 URL值，解析其中的：path、search、hash值。

路由使用步骤

第一步：安装

react-router-dom是浏览器端的基于react-router库的库，所以装了这个以后就不用再手动装react-router了

npm install react-router-dom

第二步：连接路由

连接你的App到浏览器的URL。用BrowserRouter包裹在你的App的外面

// main.jsx
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
	<BrowserRouter>
		<App />
	</BrowserRouter>
);

第二步：路由表配置

//路由表配置：src/routes/index.jsx
import { Navigate } from 'react-router-dom';

import Home from '../views/Home';
import Friend from '../views/Friend';
import Setting from '../views/Setting';
import NotFound from '../views/NotFound';
import Chat from '../views/Chat';

const routes = [
  // Navigate 重定向
	{ path: '/', element: <Navigate to='/home' /> },
	{ path: '/home', element: <Home /> },
	{
		path: '/friend',
		element: <Friend />,
		children: [{ path: 'chat/:name', element: <Chat /> }],
	},
	{ path: '/setting', element: <Setting /> },
	{ path: '*', element: <NotFound /> },
];

export default routes;

第四步：注册路由及配置路由链接

在src/App.jsx里注册路由，添加链接和全局导航。

// App.jsx
import { useState } from 'react';
import './App.css';

import { NavLink, useRoutes } from 'react-router-dom';
import routes from './routes';

const App = () => {
  // 根据路由表生成对应的路由规则
  const ElementRouter = useRoutes(routes);
  
	const [items] = useState([
		{ path: '/home', title: '首页' },
		{ path: '/friend', title: '好友' },
		{ path: '/setting', title: '设置' },
	]);

	return (
		<div className='app'>
			<nav className='nav'>
				<div className='w'>
          	{/* 路由链接 */}
					{items.map(item => (
						<NavLink className={({ isActive }) => (isActive ? 'active' : '')} to={item.path} key={item.path}>
							{item.title}
						</NavLink>
					))}
				</div>
			</nav>
			{/* 注册路由 */}
			{ElementRouter}
		</div>
	);
};

export default App;

第五步：创建路由组件

路由组件都放在src目录下的views或者pages文件中

使用组件配置路由

import { NavLink, Route, Routes } from 'react-router-dom';

import Chat from './views/Chat';
import Friend from './views/Friend';
import Home from './views/Home';
import NotFound from './views/NotFound';
import Setting from './views/Setting';

const App = () => {
	const items = [
		{ path: '/', title: '首页' },
		{ path: '/friend', title: '好友' },
		{ path: '/setting', title: '设置' },
	];

	return (
		<div className='app'>
			<nav className='nav'>
				<div className='w'>
					{items.map(item => (
						<NavLink className={({ isActive }) => (isActive ? 'active' : '')} to={item.path} key={item.path}>
							{item.title}
						</NavLink>
					))}
				</div>
			</nav>

			<Routes>
				<Route path='/' element={<Home />} />
				<Route path='friend' element={<Friend />}>
					<Route path='chat/:name' element={<Chat />} />
				</Route>
				<Route path='setting' element={<Setting />} />
				<Route path='*' element={<NotFound />} />
			</Routes>
		</div>
	);
};

export default App;

默认路由

默认路由使用index属性实现。

index路由和其他路由不同的地方是它没有path属性，他和父路由共享同一个路径。

  • index路由渲染在父路由的outlet，而且路由地址和父路由相同
  • index路由在父路由匹配并且其他子路由不匹配的时候 匹配
  • index路由是一个父节点默认的子节点
  • index路由在用户还没有点击导航中的链接时渲染
const routes = [
	{
		path: '/setting',
		element: <Setting />,
		children: [
			{ index: true, element: <Other1 /> },
			{ path: 'other1', element: <Other1 /> },
			{ path: 'other2', element: <Other2 /> },
		],
	},
];

import { Link,Outlet } from "react-router-dom";
const Settings = props => {
	return (
		<div id='settings' className='w'>
			<h1>设置</h1>
			<Link to='/setting/other1'>选项1</Link>
			<Link to='/setting/other2'>选项2</Link>
			<Outlet className='child'></Outlet>
		</div>
	);
};
export default Settings;
  • 当路径是 /setting 的时候，Setting组件中的Outlet会显示 Other1 组件
  • 当路径是 /setting/other1 的时候，Setting组件中的Outlet会显示 Other1 组件
  • 当路径是 /setting/other2 的时候，Setting组件中的Outlet会显示 Other2 组件

路由监听

import { useLocation } from 'react-router-dom';

// 监听路由的变化
const location = useLocation();
useEffect(() => {
  console.log('进入：', location.pathname);
  return () => {
    console.log('离开：', location.pathname);
  };
});

路由传参

params参数

react路由支持动态路由

// 路由表
const routes = [
	{
    path: 'chat/:name',
    element:<Chat/>,
	},
];

<Link to='/chat/张三'>张三</Link>

获取参数使用 useParams

import { useParams } from 'react-router-dom';

// 获取路径参数
const params = useParams();  
params // {name: '张三'}

search参数

// 路由表
const routes = [
	{
    path: 'chat',
    element: <Chat/>,
	},
];

<Link to='/chat/?name=张三'>张三</Link>

获取参数使用 useSearchParams

import { useSearchParams } from 'react-router-dom';

const [search, setSearch] = useSearchParams();
const name = search.get('name'); // 张三

或者使用useLocation

import { useLocation } from 'react-router-dom';
import qs from "query-string";

const { search } = useLocation();
console.log(qs.parse(location.search)); // {name: '张三'}

备注：useLocation获取到的search是urlencoded编码字符串(例如: ?age=20&name=zhangsan)，需要借助query-string解析参数成对象

state属性

通过Link的state属性传递参数

// 路由表
const routes = [
	{
    path: 'chat',
    element: <Chat/>,
	},
];

<Link to='/chat' state={ {name:'张三'} }>张三</Link>

获取参数使用useLocation

import { useLocation } from 'react-router-dom';

let { state } = useLocation();

state // {name: '张三'}

编程式的导航

编程导航使用 useNavigate

import {  useNavigate } from "react-router-dom";
export default function Demo() {
  const navigate = useNavigate();
  //...
}

push导航

  1. push跳转+携带params参数
navigate(`/child/${id}/${title}`);
  1. push跳转+携带search参数
navigate(`/child?id=${id}&title=${title}`);
  1. push跳转+携带state参数
navigate("/child", { state: { id, title }});

replace导航

  1. replace跳转+携带params参数
navigate(`/child/${id}/${title}`,{replace: true});
  1. replace跳转+携带search参数
navigate(`/b/child?id=${id}&title=${title}`,{replace: true});
  1. replace跳转+携带state参数
navigate("/child", { state: { id, title },replace: true});

路由懒加载

  • React利用 React.lazy与import()实现了渲染时的动态加载
  • 利用Suspense来处理异步加载资源时页面应该如何显示的问题
  • 通过lazy() api来动态import需要懒加载的组件
  • import的组件目前只支持export default的形式导出
  • Suspense来包裹懒加载的组件进行加载，可以设置fallback现实加载中效果
  • React.lazy可以结合Router来对模块进行懒加载。

React.Suspense与React.lazy来实现

React.suspense用来实现懒加载路由时的loading兜底

<Suspense fallback={<Loading />}>
  <SomeComponent />
</Suspense>
  • fallback参数中可以传入react组件或dom元素，例如：<div>Loading...</div>
  • 注意：React.suspense不只是针对于懒加载的路由，而针对所有懒加载的组件，只要是存在懒加载的，都可以通过在外成包裹 React.suspense来实现loading或其他占位dom

React.lazy用来包装组件路径，实现路由懒加载

const LazyDemoPage = lazy(() => import("@views/DemoPage"));
  • 注意：React.lazy目前只支持默认导出(default exports)

案例：

//路由表配置：src/routes/index.jsx
import { lazy, Suspense } from 'react';

const Chat = lazy(() => import('@/views/Chat'));
const Friend = lazy(() => import('@/views/Friend'));
const Home = lazy(() => import('@/views/Home'));
const Setting = lazy(() => import('@/views/Setting'));
const NotFound = lazy(() => import('@/views/NotFound'));

const LoadingTip = Element => (
	<Suspense fallback={<div>loading...</div>}>
		<Element />
	</Suspense>
);

const routes = [
	{ path: '/', element: LoadingTip(Home) },
	{
		path: '/friend',
		element: LoadingTip(Friend),
		children: [
			{
				path: 'chat/:name',
				element: LoadingTip(Chat),
			},
		],
	},
	{ path: '/setting', element: LoadingTip(Setting) },
	{ path: '*', element: LoadingTip(NotFound) },
];

export default routes;

路由拦截

路由表

//路由表配置：src/routes/index.jsx
import { lazy, Suspense } from 'react';

const Chat = lazy(() => import('@/views/Chat'));
const Friend = lazy(() => import('@/views/Friend'));
const Home = lazy(() => import('@/views/Home'));
const Login = lazy(() => import('@/views/Login'));
const NotFound = lazy(() => import('@/views/NotFound'));

const LoadingTip = Element => (
	<Suspense fallback={<div>loading...</div>}>
		<Element />
	</Suspense>
);

const routes = [
	{
		path: '/',
		element: LoadingTip(Home),
		meta: {
			title: '首页',
			auth: false,
			menu: true,
		},
	},
	{
		path: '/friend',
		element: LoadingTip(Friend),
		meta: {
			title: '好友',
			auth: true,
			menu: true,
		},
		children: [
			{
				path: 'chat/:name?',
        element: LoadingTip(Chat),
        meta: {
          title: '聊天',
          auth: true,
          menu: true,
        },
			},
		],
	},
	{
		path: '/login',
		element: LoadingTip(Login),
		meta: {
			title: '登录',
			auth: false,
			menu: true,
		},
	},
	{
		path: '*',
		element: LoadingTip(NotFound),
		meta: {
			title: '404',
			auth: false,
			menu: false,
		},
	},
];

export default routes;

拦截函数

//路由表配置：src/routes/routerBefore.jsx

import { Navigate, useLocation, useRoutes } from 'react-router-dom';
import routes from './index';

// 拦截组件
const RouterBeforeEach = props => {
	if (props?.route?.meta?.title) {
		document.title = props.route.meta.title;
	}
	const isLogin = !!localStorage.getItem('token');
	if (props?.route?.meta?.auth) {
		if (!isLogin) {
			return <Navigate to={'/login'} replace />;
		}
	}
	const location = useLocation();
	const routerKey = location.pathname;
	if (isLogin && ['/login'].includes(routerKey)) {
		return <Navigate to={'/'} replace />;
	}
	return <div>{props.children}</div>;
};

// 渲染路由
const renderRoutes = routes => {
	return routes.map(item => {
		const route = { meta: item.meta, path: item.path };

		route.element = <RouterBeforeEach route={item}>{item.element}</RouterBeforeEach>;

		if (item.children) {
			route.children = renderRoutes(item.children);
		}
		return route;
	});
};

export default function Router() {
	return useRoutes(renderRoutes(routes));
}

注册路由

// App.jsx

import NavBar from './components/NavBar';
import Router from './routes/routerBefore';

const App = () => {

	return (
		<div className='app'>
			<NavBar></NavBar>
			{/* 注册路由 */}
			{/* {Router()} */}
			<Router></Router>
		</div>
	);
};

export default App;

其他

4k字介绍 React Router 6.4 超大变化：引入 Data API。你不纯粹了！ - 掘金 (juejin.cn)

react-router v6 路由守卫最佳实践! - 掘金 (juejin.cn)

react-router v6 如何实现动态路由？ - 掘金 (juejin.cn)

react routerV6基础使用及路由拦截 - 知乎 (zhihu.com)

萧寂173
关注
  • 2
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
react-router-dom路由配置
读心悦
05-17 650
react-router-dom 是 React 的官方路由库，用于在 React 应用程序中实现单页面应用（SPA）的路由管理。下面是一个基本的 react-router-dom 路由配置示例：首先，确保你已经安装了 react-router-dom。
react-router-i18n:建立在React Router之上的国际化库
04-28
这是一个使用React Router进行I18n（国际化）的小型图书馆。 演示版 安装 yarn add react-router-i18n 请注意，此程序包具有以下对等依赖项： { " react " : " ^16.8.4 " , " react-dom " : " ^16.8.1 " , " ...
React配置路由----傻瓜教程
Qing_0124的博客
04-28 7427
----整体思路就是：就是在路由文件里配置路由，再将路由文件导入App.js,最后将App.js导入src下的index.js。 1.创建React项目： create-react-app day01react 2.安装全局和路由依赖： cnpm install -g create-react-app （仅第一次创建项目前需要） cnpm install react-router-dom@5.2.0 --save（安装6.0以下版本，因为6.0以上版本某些属性已经被迭代） 3.新建两个页面 4
react路由配置
qq_19820589的博客
04-23 448
组件会渲染对应的组件。组件来实现路由匹配和渲染。React 路由可以通过。
react-router路由配置
前端技术的学习整理
05-21 6762
vue路由传参，路由配置const RouteConfig = [ { path: 'first', component: First, name: '第一个路由', routes: [ { path: '1', component: Ch...
react配置路由 react-route-dom 6.10.0
weixin_45835723的博客
04-18 316
react项目配置路由 使用react-route-dom 6.10.0
react中ant.design框架配置动态路由
最新发布
精通前端技术，了解后端接口
10-12 1944
动态路由是一种在Web应用程序中用于根据特定参数或条件生成路由路径的方式。与静态路由不同，动态路由的路径不是在代码中硬编码的，而是根据变量或参数的值而生成。这使得动态路由非常适合需要根据不同情况呈现内容或导航到不同页面的情况。动态路由通常使用占位符或参数来定义路由规则，这些参数在访问特定路由时会被替换为实际的数值或文本。这些参数可以是用户输入的数据、URL中的查询字符串、或从应用程序状态中提取的信息。
ReactI18nRouting:React React-Router上的抽象层可轻松创建i18n路由
04-30
ReactI18n路由 :globe_with_meridians: React-Router上的抽象层可轻松创建i18n路由 :top_hat: 特征 :link: 抽象层 :light_bulb: 内置的i18n路由策略 :control_knobs: 与状态处理策略脱钩 :rocket: 1分钟配置 :...
将Markdown渲染为React组件-React开发
05-27
react-markdown将Markdown渲染为纯React组件。...require（'react-dom'）const ReactMarkdown = require（'react-markdown'）const input ='＃这是一个标头\ n \ n这是一个段落'ReactDOM.render（ ，
网站：最好的React + Koa + SSR + I18n技术栈
02-03
最好的React技术栈 打字稿（静态检查） React（查看） @ reach / router（分形路由支持，更简洁的API） Immer（不可变数据，处理复杂对象的更新） 重新匹配（状态管理，更好的redux，更少的代码，更好的async...
React Native中NavigatorIOS组件的简单使用详解
08-28
- popN(n)：返回n个页面，n=1相当于pop()。 - replace(route)：替换当前路由。 - replacePrevious(route)：替换前一页面并回退。 - resetTo(route)：替换顶层路由并回退。 - popToTop()：直接回到栈顶的页面，...
React中路由的配置，基于react-router-dom实现路由管理
weixin_43486426的博客
07-11 1624
基于react-router-dom ，实现react中路由的跳转 既然是基于react-router-dom实现的路由，那么我们第一步当然是下载react-router-dom啦 npm i react-router-dom -s 基本概念 我们先讲几个我们要用到的存在于react-router-dom包中几个基本的方法，{ BrowserRouter, Route,Switch,Redirect} 1、第一个BrowserRouter就是总的路由管理了，他是说明，内部的路由的跳转，都是基于浏览器的hi
学习react-router-v6 : useSearchParams、Outlet、Navigate
weixin_45696837的博客
05-31 809
学习react-router-v6 : useSearchParams、Outlet、useOutletContext、Navigate、useNavigate。
React 动态添加路由
热门推荐
小明同学c的成长日记
12-22 1万+
react动态渲染菜单及路由
react-native 的路由基础
m0_60322879的博客
05-16 1494
1
【搭建react-native项目框架】3.集成第三方路由和tab页
公西雒的技术站
05-28 2385
这里需要用到两个第三方插件：react-native-router-flux 路由，https://github.com/aksonov/react-native-router-fluxreact-native-scrollable-tab-view 选项卡，https://github.com/skv-headless/react-native-scrollable-tab-viewprop-t...
React-native IT喵喵~路由之React Navigation
舒哥的blog
06-07 2849
大家自己 去看文档吧！！！ 为了业务快把文档看完了。。。 不过给大家翻译了一点。。。欢迎大家关注一下 基于React-naive开发的“IT喵~”项目。技能GET、互联网资讯、程序员相亲、GitHub监控。。。 Github地址：https://github.com/cbamls/kitty_front效果图内置的Navigators起react-navigation 包含了下列三种函数赖创建na
React-router路由实践
xcxiang的博客
08-24 3464
Router,hashHistory,Route 首先下载react-router npm install react-router --save 使用时，路由器Router就是React的一个组件。 import { Router } from 'react-router'; render(, document.getElementById('app')); Router组
React-34：路由的push与replace
臧小川的博客
08-25 2188
router.push(location) 想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL 当你点击 时，这个方法会在内部调用，所以说，点击 等同于调用 router.push(…)。 replace模式是替换模式，会替换掉栈顶的路由 设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 hist
react路由安装与使用
05-18
React Router 是 React 中用于处理客户端路由的库，它提供了一种将应用程序状态同步到 URL 上的方式。以下是 React Router 的安装和使用步骤： 1. 安装 React Router。你可以使用 npm 或 yarn 进行安装。 ```bash...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

萧寂173

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值