react路由和页面跳转

阅读目录

• 创建路由
• 路由导入：在主函数index.js
• 路由跳转的两种方式
• 子路由
• 跳转页面参数传递
• 一个小错误

 

回到顶部

创建路由

router/index.js：

import App from '../pages/App';
import Login from '../pages/Login';
import Main from '../pages/Main';
import Page2 from '../pages/page2';
import Page1 from '../pages/page1';
import { createBrowserRouter, Navigate } from "react-router-dom";
const router = createBrowserRouter([
    {
        path: '/',
        element: <Login />
    },
    {
        path: '/app',
        element: <App />
    },
    {
        path: '/main',
        element: <Main />,
        children: [ // 将 Page1 作为 Main 的子路由
            {
                path: 'page1', // 这里的 path 会变成 /main/page1
                element: <Page1 />
            },
            {
                path: 'page2',// 注意这里移除 '/'
                element: <Page2 />
            },
            {
                path: '', // 默认路径
                element: <Navigate to="page1" /> // 重定向到 /main/page1
            }
        ]
    }
]);

export default router;

回到顶部

路由导入：在主函数index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import router from "./router"
import './index.css'; // 导入 index.css
 
import {  RouterProvider } from 'react-router-dom'
 
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
 
  <React.StrictMode>
    <RouterProvider router={router}></RouterProvider>
  </React.StrictMode>
 
);

回到顶部

路由跳转的两种方式

使用 useNavigate 钩子： useNavigate 是一个钩子，可以让你在函数组件中进行编程式导航。这对于需要根据某些条件或事件（例如表单提交或按钮点击）进行跳转的情况非常有用。

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

function MyComponent() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/目标路径'); // 跳转到指定路径
  };

  return (
    <button onClick={handleClick}>跳转</button>
  );
}

使用 Link 组件： Link 组件提供了一种声明式的方式来导航，通常用于菜单、列表或者链接中。当用户点击这些链接时，React Router 会处理路由导航。

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

function Navigation() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/目标路径">跳转到目标路径</Link>
        </li>
      </ul>
    </nav>
  );
}

这两种方式可以根据你的实际需求选择使用。当你需要动态决定跳转时使用useNavigate，而当你想要在用户界面中提供静态链接时使用Link组件。

例如：

回到顶部

子路由

这个子路由相当于这种

{
        path: '/main',
        element: <Main />,
        children: [ // 将 Page1 作为 Main 的子路由
            {
                path: 'page1', // 这里的 path 会变成 /main/page1
                element: <Page1 />
            },
            {
                path: 'page2',// 注意这里移除 '/'
                element: <Page2 />
            },
            {
                path: '', // 默认路径
                element: <Navigate to="page1" /> // 重定向到 /main/page1
            }
        ]
    }

然后怎么跳转呢：

总代码：

import React, { useState } from 'react';
import { Link, Outlet, useLocation } from "react-router-dom"; // 导入 useLocation
import './main.css';

import { Menu, Switch } from 'antd';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons'; // 导入所需的图标

const SubMenu = Menu.SubMenu;

const Main = () => {
  const [theme, setTheme] = useState('light'); // 初始主题
  const [current, setCurrent] = useState('1'); // 默认选中的菜单项
  
  const location = useLocation(); // 使用 useLocation 获取路由信息
  const { username } = location.state || {}; // 从状态中获取 username
  // 点击菜单项时的处理
  const handleClick = (e) => {
    setCurrent(e.key);
  };

  // 切换主题
  const changeTheme = (checked) => {
    setTheme(checked ? 'dark' : 'light');
  };

  return (
    <div style={{ display: 'flex', height: '100vh', width: '100%', flexDirection: 'row' }}>
      <div style={{ width: 240, background: theme === 'dark' ? 'rgb(64,64,64)' : 'white', flexDirection: 'column', display: 'flex', height: '100%' }}>
        <Menu
          theme={theme}
          onClick={handleClick}
          style={{ width: 240 }}
          defaultOpenKeys={['sub1']}
          selectedKeys={[current]}
          mode="inline"
        >
          <SubMenu key="sub1" title={<span><MailOutlined /><span>Navigation One</span></span>}>
            <Menu.Item key="1">
              <Link to="/main/page1">{'Option 1'}</Link> {/* 指向子路由 */}
            </Menu.Item>
            <Menu.Item key="2">
              <Link to="/main/page2" state={{ username }}>{'Option 2'}</Link> {/* 指向子路由  传递 username */}
            </Menu.Item>
            <Menu.Item key="3">Option 3</Menu.Item>
            <Menu.Item key="4">Option 4</Menu.Item>
            <Menu.Item key="5">Option 5</Menu.Item>
          </SubMenu>
          <SubMenu key="sub2" title={<span><AppstoreOutlined /><span>Navigation Two</span></span>}>
            <Menu.Item key="5">Option 5</Menu.Item>
            <Menu.Item key="6">Option 6</Menu.Item>
            <SubMenu key="sub3" title="Submenu">
              <Menu.Item key="7">Option 7</Menu.Item>
              <Menu.Item key="8">Option 8</Menu.Item>
            </SubMenu>
          </SubMenu>
          <SubMenu key="sub4" title={<span><SettingOutlined /><span>Navigation Three</span></span>}>
            <Menu.Item key="9">Option 9</Menu.Item>
            <Menu.Item key="10">Option 10</Menu.Item>
            <Menu.Item key="11">Option 11</Menu.Item>
            <Menu.Item key="12">Option 12</Menu.Item>
          </SubMenu>
        </Menu>

        <div style={{ marginTop: 'auto', padding: '10px', textAlign: 'right' }}>
          <Switch
            checked={theme === 'dark'}
            onChange={changeTheme}
            checkedChildren="深色"
            unCheckedChildren="浅色"
          />
        </div>
      </div>
      
      <div style={{ flex: 1, background: '#f0f2f5', padding: '20px' }}>
        {username && <h2>欢迎 {username} 光临！</h2>} {/* 显示用户名 */}
        <Outlet /> {/* 渲染子路由 */}
      </div>
    </div>
  );
}

export default Main;

回到顶部

跳转页面参数传递

跳转页面：

import { useNavigate } from "react-router-dom";
const navigate = useNavigate();

const handleFinish = (values) => {
  // 跳转到主页
  navigate('/main/Page1',{ state: { username: values.username } }) ; // 这里修正为直接调用navigate
};

接收页面

const location = useLocation(); // 使用 useLocation 获取路由信息
const { username } = location.state || {}; // 从状态中获取 username
再通过link跳转
<Menu.Item key="2">
      <Link to="/main/page2" state={{ username: username }}>{'Option 2'}</Link> {/* 指向子路由  传递 username */}
</Menu.Item>

回到顶部

一个小错误

一开始想这，对于login.js跳转到main.js，然后路由哪里main.js又重定向到main/page1.js，本来想这login.js传到main.js中的page2.js，这样使得我的参数丢失了。因为我在/login跳转到/main，参数传到main,但是我重定向了，只能使得他传到main.js不能传到page1.js，这样也不能传到page2.js。也就是传丢了
得修改一下