react-router-dom基础路由使用

目录结构

这四个文件的相关关系如下：

话不多说，上马！

路由设置

index.js

import React from 'react';
import { render } from 'react-dom';
import * as serviceWorker from './serviceWorker';
import './index.css';
import './mock/index';
import { BrowserRouter, Redirect, Switch, Route } from 'react-router-dom';

import App from './App';
import login from './pages/login/index';

render((
  <BrowserRouter>
    <Switch>
      <Route path="/jtywgl" component={App}></Route>
      <Route path="/login" exact component={login}></Route>
      <Redirect from="/" to="/login"></Redirect>
    </Switch>
  </BrowserRouter>
), document.getElementById('app'))

serviceWorker.unregister();

简单说下，这里如果在地址栏输入下面的路径，就会跳转到登入页面

http://localhost:3000/login

/login/index.js

import React from 'react';
import './index.css';
import {UserOutlined, KeyOutlined} from '@ant-design/icons';

class login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      username: '',
      password: ''
    }
  }
  componentDidMount() {
    
  }
  handleChangeName = (event) => {
    this.setState({username: event.target.value});
  }
  handleChangePassword = (event) => {
    this.setState({password: event.target.value});
  }
  ywLogin = () => {
    // 登入
    console.log('提交的名字: ' + this.state.username);
    console.log(this.props.history);
    this.props.history.push({
      pathname: '/jtywgl/ywkclb'
    });
  }
  render() {
    return (
      <div id="login-layout">
        <div id="login-box">
          <h1>Login</h1>
          <div className="form">
              <div className="item">
                <UserOutlined />
                <input type="text" placeholder="Username"
                  value={this.state.username} onChange={this.handleChangeName} />
              </div>
              <div className="item">
                <KeyOutlined />
                <input type="password" placeholder="Password"
                  value={this.state.password} onChange={this.handleChangePassword}  />
              </div>
          </div>
          <button onClick={this.ywLogin}>Login</button>
        </div>
      </div>
    );
  }
}

export default login;

反正输入后跳转到如下页面。

App.js

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import ywkclb from './pages/ywkclb/index';
import LayoutHeader from './layout/header';
import LayoutFooter from './layout/footer';
import './App.css';
import { Layout } from 'antd';

const { Content } = Layout;

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
  render() {
    return (
      <div className="jtyw-main-container">
        <Layout className="layout">
          <LayoutHeader></LayoutHeader>
          <Content style={{ padding: '0 50px' }}>
            <div className="site-layout-content">
              <Switch>
              	// 注意下面这条代码
                <Route path="/jtywgl/ywkclb" exact component={ywkclb}></Route>
              </Switch>
            </div>
          </Content>
          <LayoutFooter></LayoutFooter>
        </Layout>
  
        {this.props.children}
        
      </div>
    );
  }
}

export default App;

ywkclb/index.js

不用看了，就像登入页面的代码一样，没有相关路由配置

文字解释

这个是react-router-dom的使用，react-router-dom可以说是react-router的衍生版本。
在第一个index.js页面设置两个路由，当匹配到对应路径时浏览器就会渲染对应的route。而后在App.js内进一步设置了路由，这个路由看路径名就能知道它是属于jtywgl页下的子路由。因为设置了exact，仅有当地址栏链接指向/jtywgl/ywkcl时才会渲染该子路由，展示内容。
以上内容仅是简单路由配置，供高级路由配置时参考。
最后，多人协作项目最好使用react-router-config配置路由，不然协作开发时每个新增的页面在App.js里添加路由信息，不仅不便于分支合并，也容易发生意料之外的错误。