react18.0.0+ts路由配置

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>
);