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

🕗 发布于 2024-07-19 08:27 学习 react.js 前端

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>
  );
}