学习react-环境&手脚架&页面&路由

1. 搭建环境

  1. 安装node和npm

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

bash 复制代码
https://nodejs.cn/
#检测是否ok
node -v
npm -v
  1. 安装react
bash 复制代码
npm install -g create-react-app

2. 创建手脚架(TypeScript)

bash 复制代码
create-react-app my-app  --template typescript
cd my-app
npm start

3.页面结构

4.引入Router

bash 复制代码
npm install react-router-dom typescript

5.创建页面

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

javascript 复制代码
// HomeMeta.tsx
export type HomeProp={
    name:string;
}

export type HomeState={
    count:number;
}
javascript 复制代码
// 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

javascript 复制代码
// LoginMeta.tsx
export interface LoginProp{
    name:string;
}

export interface LoginState{
    count:number;
}
javascript 复制代码
// 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

javascript 复制代码
// Meta.tsx
export interface MetaProp{
    name:string;
}

export interface MetaState{
    count:number;
}
javascript 复制代码
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

javascript 复制代码
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <HashRouter>
      <App />
    </HashRouter>
    
  </React.StrictMode>
);
javascript 复制代码
// 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

javascript 复制代码
//  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

javascript 复制代码
// 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

相关推荐
hepherd4 分钟前
Flask学习笔记 - 模板渲染
前端·flask
LaoZhangAI5 分钟前
【2025最新】Manus邀请码免费获取完全指南:5种稳定渠道+3个隐藏方法
前端
经常见6 分钟前
浅拷贝与深拷贝
前端
梅子酱~11 分钟前
Vue 学习随笔系列二十二 —— 表格高度自适应
javascript·vue.js·学习
前端飞天猪11 分钟前
学习笔记:三行命令,免费申请https加密证书📃
前端
关二哥拉二胡12 分钟前
前端的 AI 应用开发系列二:手把手揭秘 RAG
前端·面试
斯~内克14 分钟前
前端图片加载性能优化全攻略:并发限制、预加载、懒加载与错误恢复策略
前端·性能优化
s_little_monster14 分钟前
【Linux】进程信号的捕捉处理
linux·运维·服务器·经验分享·笔记·学习·学习方法
奇怪的知识又增长了23 分钟前
Command SwiftCompile failed with a nonzero exit code Command SwiftGeneratePch em
前端
Maofu23 分钟前
从React项目 迁移到 Solid项目的踩坑记录
前端