react路由配置

准备工作

需要安装依赖 npm i react-router-dom
然后创建在我们app.js中配置路由，具体做法如下:

import './App.css';
import { BrowserRouter as Router, Routes, Route} from "react-router-dom";
import Home from "./views/home/index";
import Target from "./views/target/index";
import My from "./views/my/index";
import Demo from "./views/demo/index";


function App() {
  return (
  <div>
    <Router>
      <Routes>
        <Route path="/home" element={<Home/>}/>
        <Route path="/target" element={<Target/>}/>
        <Route path="/my" element={<My/>}/>
        <Route path="/demo" element={<Demo/>}/>
      </Routes>
    </Router>
  </div>
  );
}

export default App;

路由重定向(可以封装)

//React.jsx
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";

export default function Redirect({ to }) {
  let navigate = useNavigate();
  useEffect(() => {
    navigate(to);
  });
  return null;
} 
// app.js
import './App.css';
import { BrowserRouter as Router, Routes, Route} from "react-router-dom";
import Home from "./views/home/index";
import Target from "./views/target/index";
import My from "./views/my/index";
import Demo from "./views/demo/index";
import Redirect from "./component/Redirect";


function App() {
  return (
  <div>
    <Router>
      <Routes>
        <Route path="/home" element={<Home/>}/>
        <Route path="/target" element={<Target/>}/>
        <Route path="/my" element={<My/>}/>
        <Route path="/demo" element={<Demo/>}/>
        <Route path="/" element={<Redirect to="/home" />} />
      </Routes>
    </Router>
  </div>
  );
}

export default App;

页面跳转（通过Link来进行跳转）详细代码如下

import React from 'react';
import { Link } from 'react-router-dom';
import "./Footer.css";

function Footer() {
    return ( 
        <footer className="w100 flex jc-sa aic footer bg-fff">
            <Link to="/home">首页</Link>
            <Link to="/target">购物车</Link>
            <Link to="/my">我的</Link>
            <Link to="/demo">demo</Link>
        </footer>
     );
}

export default Footer;

配置子路由

首先创建子组件
然后在app.js中将但标签变为双标签,然后把子组件添加进去
代码如下:

import './App.css';
import { BrowserRouter as Router, Routes, Route} from "react-router-dom";
import Home from "./views/home/index";
import Target from "./views/target/index";
import List from "./views/target/list"
import Deatail from "./views/target/detail"
import My from "./views/my/index";
import Demo from "./views/demo/index";
import Redirect from "./component/Redirect";


function App() {
  return (
  <div>
    <Router>
      <Routes>
        <Route path="/home" element={<Home/>}/>
        {/* 配置子路由 */}
        <Route path="/target" element={<Target/>}>
          <Route path="list" element={<List/>}/>
          <Route path="detail" element={<Deatail/>}/>
        </Route>
        <Route path="/my" element={<My/>}/>
        <Route path="/demo" element={<Demo/>}/>
        <Route path="/" element={<Redirect to="/home" />} />
      </Routes>
    </Router>
  </div>
  );
}

export default App;

然后配置路由出口

import React from 'react';
import { Outlet } from 'react-router';
import Footer from "../../component/Footer";

function Target() {
  return (
    <div>
      target
      <hr/>
      <Outlet/>
      <Footer/>
    </div>
  );
}

export default Target;