webpack+react新建项目—— 使用react-router-dom和antd

最新推荐文章于 2024-04-17 09:57:38 发布

「已注销」

最新推荐文章于 2024-04-17 09:57:38 发布

阅读量642

点赞数

分类专栏： webpack react 文章标签： react.js webpack javascript

本文链接：https://blog.youkuaiyun.com/weixin_54012475/article/details/123100847

版权

本文介绍了如何在webpack和react项目中集成react-router-dom进行页面路由管理，并详细讲解了添加antd库及样式处理的过程。在解决BrowserRouter刷新报错问题时，提出了设置historyApiFallback为true或切换到HashRouter的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装react-router-dom

npm install react-router-dom

修改app.tsx组件

import React, {
    useState } from "react";
import {
   
  BrowserRouter,
  Route,
  Link,
  Routes
} from "react-router-dom"

interface IProps {
   
  title: string
}

const About = () => {
   
  return <div>about</div>
}

const Users = () => {
   
  return <div>users</div>
}

const Home = () => {
   
  return <div>home</div>
}

const App = (props: IProps) => {
   
  const {
    title } = props;
  const [collapsed, setCollapsed] = useState(false);
  return (
    <BrowserRouter>
      <ul>
        <li><Link to="/">Home<