1.下载依赖
npm i react-router-dom@5.2.0 react-router-config @types/react-router-config @types/react-router-dom -S
2.在src目录下创建views文件夹,views内创建Home,About,Navbar三个tsx文件,其中Navbar用来控制路由,其他两个页面用来展示
Home:
import React, { Component } from "react";
export default class Home extends Component {
render() {
return (
<div className="home">
<div className="container">
<h3 className="center"> Home页面</h3>
<p>欢迎来到首页</p>
</div>
</div>
);
}
}
About:
import React, { Component } from "react";
export default class About extends Component {
render() {
return (
<div className="about">
<div className="container">
<h3 className="center"> About页面</h3>
<p>欢迎来到关于我们页面!</p>
</div>
</div>
);
}
}
Navbar:
import React, { Component } from "react";
export default class Navbar extends Component {
render() {
return (
<nav className="nav-wrapper">
<div className="list">
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/about'>About</a></li>
</ul>
</div>
</nav>
)
}
}
3.在src目录下创建routes文件夹,同时创建index.ts,使用RouteConfig对路由进行统一管理
// 导入路由组件
import Home from '../views/Home'
import About from '../views/About'
// 导入路由管理工具
import {RouteConfig} from 'react-router-config'
const routes:RouteConfig = [
{
path:'/',
exact:true,
component:Home
},
{
path:'/about',
exact:true,
component:About
},
]
export default routes;
4.App.tsx中引入Route,Navbar和路由管理工具
import React from "react";
// 引入路由导航栏
import Navbar from "./views/Navbar";
// 引入routes组件
import routes from "./routes";
// 引入包管理工具
import { renderRoutes, RouteConfig } from "react-router-config";
import "./App.css";
function App() {
return (
<div className="App">
<Navbar />
{/* 设置routes的类型为RouteConfig[],否则报错 */}
{renderRoutes(routes as RouteConfig[])}
</div>
);
}
export default App;
5.编辑根目录index.tsx
import App from './App';
import { createRoot } from 'react-dom/client';
import { BrowserRouter as Router } from "react-router-dom";
const container = document.getElementById('root');
const root = createRoot(container as HTMLDivElement);
root.render(
<Router>
<App />
</Router>
);