React-基础知识(四)

1.配置路由

1. (1) 配置路由步骤

    

   1. 安装路由插件

   2. 安装命令:npmi react-router-dom

2. 创建需要的组件: 

3. 在app.js配置所需路由

   1. Router 最外层需要用Router进行包裹(只需一次)

   2. Routes 路由组件包裹层

   3. Route 用来配置路由,包括路由地址和路由组件

根据自己需要配置路由代码如下:

导入所需组件:

import React from 'react';

// 配置路由
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
import Home from './views/home';
import Target from './views/targrt';
import My from './views/my';

配置路由代码:

function App() {
  return (
    <div className='app'>
      <Router>
        <Routes>
          <Route path="/home" element={<Home/>}>首页</Route>
          <Route path="/target" element={<Target/>}>位置</Route>
          <Route path="/my" element={<My/>}>个人中心</Route>
        </Routes>
      </Router>
    </div>
  );
}

export default App;

2.配置子路由

导入所需组件:

// 配置子路由
import Order from './views/order/index';
import OrderList from './views/order/children/List'
import OrderDetail from './views/order/children/Detail';

配置子路由代码(添加到自己所需位置):

          <Route path="/order" element={<Order/>}>
            {/* 子路由配置 */}
            <Route path="list" element={<OrderList/>}>订单列表</Route>
            <Route path="detail" element={<OrderDetail/>}>订单详情</Route> 
          </Route>

注意:子路由前面路径不用加  /   path="xxx"  

3.重定向(默认跳到自己所需页面)

创建组件Redirect

组件代码如下:

import { useEffect } from "react";
import { useNavigate } from "react-router-dom";

export default function Redirect({ to }) {
  let navigate = useNavigate();
  useEffect(() => {
    navigate(to);
  });
  return null;
} 

导入组件:

import Redirect from './Redirect';

 使用Redirect组件

代码如下:

function App() {
  return (
    <div className="app">
      <Router>
        <Routes>
          <Route path="/home" element={<Home />} /> 
           {/* 重定向 */}
          <Route path="/" element={<Redirect to="/home" />} />
     </Routes>
      </Router>
    </div>
  );
}