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;
``
相关推荐
中微子5 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
中微子5 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
前端_学习之路6 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_6 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
甜瓜看代码6 小时前
1.
react.js·node.js·angular.js
伍哥的传说7 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
Misha韩8 小时前
React Native 一些API详解
react native·react.js
小李飞飞砖8 小时前
React Native 组件间通信方式详解
javascript·react native·react.js
小李飞飞砖8 小时前
React Native 状态管理方案全面对比
javascript·react native·react.js