[JavaScript知识库] react-router6设置默认路由

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> react-router6设置默认路由 -> 正文阅读

[JavaScript知识库]react-router6设置默认路由

React Router 6.x与React Router 5.x 版本相比，改变了什么？

内置组件：移除Switch ，新增 Routes ；移除了 Redirect 组件，改用 Navigate 组件，新增Outlet等;
语法：component={About} 变为 element={}等。
新增hook：useParams、useNavigate、useMatch等。

…

import './App.scss';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'

import Home from './pages/Home/Home';
import Setting from './pages/Setting/Setting';
function App() {
  return (
    <div className="App">
      <Router>
        <header>
          <ul>
            <Link to="/home"><li>首页</li></Link>
            <Link to="/setting"><li>设置</li></Link>
          </ul>
        </header>
        <Routes>
          <Route path="/" element={<Home />}></Route>
          <Route path="/setting" element={<Setting />}></Route>
          <Route path="*" element={<Home />} />      
        </Routes>
      </Router>
      
    </div>
  );
}

export default App;