React-router路由配置及跳转

1、安装依赖react-router-dom

复制代码
npm install react-router-dom -S

2、创建文件配置router.jsx

复制代码
import { Route } from 'react-router-dom';
import Login from '@views/login/Index.jsx';
import Settings from '@views/settings/Index.jsx';

// 定义路由配置数组
const routes = [
  {
    path: '/',
    exact:true,
    component: Login,
  },
  {
    path: '/login',
    component: Login,
  },
  {
    path: '/settings',
    component: Settings,
  },
];

// 将路由配置数组转换为Route组件(注意:Component属性是大写开头)
const renderRoutes = () => routes.map((route, index) => (
  <Route
    key={index}
    path={route.path}
    Component={route.component}
    exact ={route.exact}
  />
));

export default renderRoutes;

3、在APP.jsx文件中引入并使用

复制代码
import renderRoutes from '@router/index.jsx';
import{HashRouter, Routes,Route,Router}from"react-router-dom";
function App() {
  return (
    <div>
      <HashRouter>
        <Routes>
            {renderRoutes()}
      </Routes>
    </HashRouter>
    </div>
  )
}

export default App;

如果不单独配置router.jsx的话,也可以在APP.jsx中直接写

复制代码
import Login from './views/login/Index.jsx';
import Settings from './views/settings/Index.jsx';
import{HashRouter, Routes,Route,Router}from"react-router-dom"
function App() {
  return (
    <div>
      <HashRouter>
        <Routes>
          <Route path="/" Component={Login}></Route>
          <Route path="/settings" Component={Settings}></Route>
      </Routes>
    </HashRouter>
    </div>
  )
}

export default App;

4、路由跳转

举例:在登录页面,点击

复制代码
import { useNavigate } from "react-router-dom";
const Login = () => {
  const Navigate = useNavigate();
  const goSettings = () => {
    Navigate('/settings');
  };
  return (
 	 <div>
   	 	<button onClick={goSettings}>跳转到设置页面</button>
     </div>
  )
};
export default Login;
``
相关推荐
心.c20 分钟前
react当中的this指向
前端·javascript·react.js
多啦C梦a37 分钟前
🪄 这么优雅?`useContext` + 自定义 Hooks:优雅管理全局状态,从主题切换说起
前端·javascript·react.js
海底火旺1 小时前
useState:批处理与函数式更新
前端·react.js·面试
G等你下课1 小时前
如何优雅地组织业务逻辑?自定义 Hook 全解析
前端·react.js
mrsk1 小时前
React useContext 实战指南:打造主题切换功能
前端·react.js·面试
小公主1 小时前
别再用 props 一层层传了!React useContext 真正用法与 useState 深度解析
前端·react.js
然我4 小时前
React 中 useEffect 到底怎么用才不会踩坑?全流程详解 + 实例讲透副作用
前端·javascript·react.js
搞前端的小菜4 小时前
从零实现一个GPT 【React + Express】--- 【2】实现对话流和停止生成
gpt·react.js·express
Dream耀5 小时前
掌握React useContext:轻量级状态共享与性能优化指南
前端·javascript·react.js
红衣信5 小时前
React 中 useContext 的使用与状态共享详解
前端·react.js·面试