博客

—-整体思路就是：就是在路由文件里配置路由，再将路由文件导入App.js,最后将App.js导入src下的index.js。

1.




安装全局环境和




创建React项目：

cnpm install -g create-react-app （仅第一次创建项目前需要）

create-react-app day01react

2.路由依赖：

cnpm install react-router-dom@5.2.0 –save（安装6.0以下版本，因为6.0以上版本某些属性已经被迭代）

3.新建两个页面

4.新建router文件夹和index.js文件，配置路由

–导入所需组件：

–导入路由：

–使用BrowserRouter包裹，在render中配置路由

import React, { Component } from 'react'
// 导入所需组件
import Login from '../components/login'
import Home from '../components/home'
// 导入路由依赖
import { Route,BrowserRouter } from 'react-router-dom'

export default class index extends Component {
  render() {
    return (
        // 使用BrowserRouter包裹，配置路由
      <BrowserRouter>
         {/* 使用/配置路由默认页；exact严格匹配 */}
        <Route component={Login} path='/' exact></Route>
        <Route component={Login} path='/Login'></Route>
        <Route component={Home} path='/Home'></Route>
      </BrowserRouter>
    )
  }
}

5.将路由文件导入至App.js

import Router from './router/index'
import './App.css';
function App() {
  return (
    <div>
      <Router></Router>
    </div>
  );
}
export default App;

6.将App.js导入至src下的index.js文件

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

7.使用

使用Bootstrap搭建页面，Bootstrap配置攻略移步

http://t.csdn.cn/6ayKf

import React, { Component } from 'react'
import { Link } from 'react-router-dom'

export default class login extends Component {
    submin() {
        this.props.history.replace('/Home')
    }
    render() {
        return (
            <div>
                <Link to='/Home'>home</Link>
                <form onSubmit={this.submin.bind(this)}>
                    <div className="form-group">
                        <label >账号：</label>
                        <input type="text" className="form-control" id="exampleInputEmail1" placeholder="输入账号"></input>
                    </div>
                    <div className="form-group">
                        <label >密码：</label>
                        <input type="password" className="form-control" id="exampleInputPassword1" placeholder="输入密码"></input>
                    </div>
                    <button type="submit" className="btn btn-info">登录</button>
                    <button type="reset" className="btn btn-danger" onClick={this.rest}>重置</button>
                </form>
            </div>
        )
    }
}

注：可直接使用Link跳转，也可使用事件跳转。

举例中form表单使用的是Bootstrap框架，请提前配置好依赖。