文章目录
- 路由的基本使用
-
- 模板文件index.html
- 入口文件index.js
- routes/index.js
- 入口组件App.js
- pages/Home/index.jsx（Home组件）
- pages/About/index.jsx（About组件）
- 实现嵌套路由
-
- routes/index.js
- Home/index.jsx
- News/index.jsx
- Message/index.jsx
路由的基本使用
create-react-app router_app，创建react项目：router_app。默认使用当前react的最新版本：react@18、react-dom@18。npm install -save react-router-dom，默认下载安装最新版本r：react-router-dom@6。涉及的文件包括：
- 模板文件index.html
- 入口文件index.js
- 路由表文件routes/index.jsx
- 入口组件App.js
- 路由组件pages/Home/index.jsx，即Home组件
- 路由组件pages/About/index.jsx，即About组件
文章图片
模板文件index.html
React App - 锐客网
入口文件index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import {BrowserRouter} from "react-router-dom";
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
);
routes/index.js
import { Navigate } from "react-router-dom";
import About from "../pages/About";
import Home from "../pages/Home";
const routes = [
{
path:"/about",
element:入口组件App.js
import React from 'react'
import {NavLink,useRoutes} from "react-router-dom";
import routes from "./routes";
export default function App() {
const element = useRoutes(routes);
return (
Vue Router Demo
About
Home
{element}
)
}
pages/Home/index.jsx（Home组件）
import React from 'react'export default function Home() {
return (
我是Home的内容
)
}
pages/About/index.jsx（About组件）
import React from 'react'export default function About() {
return (
我是About的内容
)
}
实现嵌套路由 【React17/18|嵌套路由的实现（React Router6）】路由结构如下：
- /about，About组件
- /home，Home组件
- /home/news，News组件
- /home/message，Message组件
News，News下新建文件：index.jsx，即News组件；在pages文件夹下新建文件夹：
Message，Message下新建文件：index.jsx，即Message组件。代码更新涉及的文件有：
- 路由表文件routes/index.js
- pages/Home/index.jsx，即Home组件
- pages/News/index.jsx，即News组件
- pages/Message/index.jsx，即Message组件
文章图片
routes/index.js
import { Navigate } from "react-router-dom";
import About from "../pages/About";
import Home from "../pages/Home";
import News from "../pages/News";
import Message from "../pages/Message";
const routes = [
{
path:"/about",
element:用
children 来嵌套路由。Home/index.jsx
import React from 'react';
import { NavLink,Outlet } from 'react-router-dom';
export default function Home() {
return (
Home组件内容
-
{/*
News */}
{/* News */}
News
-
Message
- 路由链接中的
to属性值，可以是to="/home/news"，即全路径to="./news"，即相对路径to="news"
- 用
import React from 'react'export default function News() {
return (
- news001
- news002
- news003
)
}
Message/index.jsx
import React from 'react'export default function Message() {
return (
)
}
