react+ts中创建路由

一、安装

自行选择版本，我这里基于6版本实现

安装6版本
npm install react-router-dom
如果需要使用老版本
npm install react-router-dom@5

二、准备几个tsx文件

// Home.tsx
import React from 'react';

const Home=()=>{
  return (
    <div className="Home">
        <div className="container">
          <h3 className="center"> Home</h3>
          <p>欢迎来到Home</p>
        </div>
      </div>
  );
}

export default Home;

// List.tsx
import React from 'react';

const List=()=>{
  return (
    <div className="List">
        <div className="container">
          <h3 className="center">List</h3>
          <p>欢迎来到List</p>
        </div>
      </div>
  );
}

export default List;

// About.tsx
import React from 'react';

const About=()=>{
  return (
    <div className="About">
        <div className="container">
          <h3 className="center"> About</h3>
          <p>欢迎来到About</p>
        </div>
      </div>
  );
}

export default About;

三、在导航中使用

<div className="nav">
	<ul>
		<li><Link to="/">home</Link></li>
        <li><Link to='/list'>List</Link></li>
        <li><Link to='/about'>About</Link></li>
	</ul>
</div>

四、在App.tsx中使用

//app.tsx
import React from 'react';
import Home from './views/Home';
import List from './views/List';
import About from './views/About';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
const App=()=>{
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/list" element={<List />} />
          <Route path="/about" element={<About/>} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

扩展：

1. 如果使用5版本，Routes则改为Switch，6版本不支持Switch 。
2. 5版本中路由写法为 <Route path="/home" component={Home}>
   6版本中路由的写法为<Route path="/home" element={<Home/>}>