1. 搭建环境
- 安装node和npm
在下面网址下载node，并安装
https://nodejs.cn/
#检测是否ok
node -v
npm -v
- 安装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
