1. 搭建环境

1. 安装node和npm

在下面网址下载node，并安装

https://nodejs.cn/
#检测是否ok
node -v
npm -v

2. 安装react

npm install -g create-react-app

2. 创建手脚架（TypeScript）

create-react-app my-app  --template typescript
cd my-app
npm start

3.页面结构

4.引入Router

npm install react-router-dom typescript

5.创建页面

创建HomePage页面：HomePage.tsx和HomeMeta.tsx

// HomeMeta.tsx
export type HomeProp={name:string;
}export type HomeState={count:number;
}

// HomePage.tsx
class HomePage extends Component<HomeProp, HomeState> {constructor(props: HomeProp) {super(props);this.state = { count: 0 };}render() {const { name } = this.props; //解构赋值return <h1>Hello, {name}!</h1>;}}export default HomePage;  

创建LoginPage页面：LoginPage.tsx和LoginMeta.tsx

// LoginMeta.tsx
export interface LoginProp{name:string;
}export interface LoginState{count:number;
}

// LoginPage.tsx
class LoginPage extends Component<LoginProp, LoginState> {constructor(props: LoginProp) {super(props);this.state = { count: 0 };}render() {return <h1>Hello, {this.props.name}!</h1>;}}export default LoginPage;

创建NotFoundPage.tsx和Meta.tsx

// Meta.tsx
export interface MetaProp{name:string;
}export interface MetaState{count:number;
}

class NotFoundPage extends Component<MetaProp, MetaState> {constructor(props: LoginProp) {super(props);this.state = { count: 0 };}render() {return <h1>Hello, {this.props.name}!</h1>;}}export default NotFoundPage;

6.配置路由

在Index.tsx配置HashRouter

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement
);
root.render(<React.StrictMode><HashRouter><App /></HashRouter></React.StrictMode>
);

// App.tsx
function App() {return (<div className="App"><Routes><Route path="/" element={<HomePage name='test' />} /><Route path="login" element={<LoginPage name='login'/>} /><Route path="*" element={<NotFoundPage name='not found'/>} /></Routes></div>);
}
// App.css
.App {text-align: center;
}

输入：
http://localhost:3000/#login 跳到login页
http://localhost:3000/#ttt 跳到not found page
http://localhost:3000 跳到HomePage

7.路由配置文件分离

创建Router.tsx

//  Router.tsx
const routes: RouteObject[] = [{path: '/',element:<HomePage name={"test"} /> //<Navigate to='home/one' /> // 重定向},{path: 'login',element: <LoginPage name={"login"} />},// 未匹配到页面{path: '*',element: <NotFoundPage name={"notfound"} />}
]
export default routes;

使用Router.tsx

// App.tsx
function App() {const element = useRoutes(routes);return (<div className="App">{element}</div>);
}

输入：
http://localhost:3000/#login 跳到login页
http://localhost:3000/#ttt 跳到not found page
http://localhost:3000 跳到HomePage