reactjs - 反应路由。不能让它工作

Question

我有以下反应模块和类，我有用户模块、用户模块、添加新用户的添加用户模块和用于显示用户的应用程序容器模块和具有 api url 的静态公共文件。但路由似乎不起作用。任何想法？

user.jsx - 定义一个用户。它有get、put、post、delete功能

'use strict';
import React, {Component}   from 'react';
import PropTypes            from 'prop-types';
import axios                from 'axios';
var Base                    = require('../Statics.Common');

export default class User extends Component {
    static get propTypes() {
        return {
            user: PropTypes.object,
            getAllUsers: PropTypes.func
        }
    }

    constructor(props) {
        super(props);
        this.user = this.props.user;
        this.getAllUsers = this.props.getAllUsers;
    }

    update(id, name) {
        var updatedName = prompt("Please enter updated name:", name);
        axios.put(Base.API + '/' + id, {name: updatedName}).then(results => {
            if(results.status == 200) {
                this.getAllUsers();
            }
        })
    }

    delete(id) {
        axios.delete(Base.API + '/' + id).then(results => {
            if(results.status == 200) {
                this.getAllUsers();
            }
        })
    }

    render() {
        return <tr>
            <td>{this.user._id || this.user.id}</td>
            <td>{this.user.name}</td>
            <button onClick={(e) => this.update(this.user._id || this.user.id, this.user.name)}>Update</button>&nbsp;
            <button onClick={(e) => this.delete(this.user._id || this.user.id)}>Delete</button>
        </tr>
    }
}

Users.jsx - users module renders list of users into a ui
 the
'use strict';
import React, {Component}   from 'react';
import PropTypes            from 'prop-types';
import User                 from './User.jsx';


export default class Users extends Component {
  static get propTypes() {
    return {
      users: PropTypes.array
    }
  }

  constructor(props) {
    super(props);
  }

  componentWillReceiveProps(props) {
    this.setState(props)
  }

  render() {
    this.users = this.props.users;
    return <div>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
          </tr>
        </thead>
        <tbody>
          {
            this.users.map(user => {
              return <User key={user._id || user.id} user={user} getAllUsers={() => this.props.getAllUsers()}/>
            })
          }
        </tbody>
      </table>
  </div>;
  }
}

AddUser.jsx - adding a new user

'use strict';

import React, {Component}   from 'react';
import PropTypes            from "prop-types";

export default class AddUser extends Component {
    static get propTypes() {
        return {
           addUser: PropTypes.func,
           name: PropTypes.string
        }
    }

    constructor(props) {
       super(props);
    }

    onNameChange(event) {
       event.preventDefault();
       event.stopPropagation();
       this.name = event.target.value;
    }

    onSubmit(event) {
        event.preventDefault();
        event.stopPropagation();
        if (this.name) {
           this.props.addUser({name: this.name});
           this.name = '';
        }
    }

    render() {
        return <div>
            <form onSubmit={event => this.onSubmit(event)}>
               <label>Name:</label>
               <input type="text" onChange={event => this.onNameChange(event)}/>
               <button type="submit">Add</button>
            </form>
        </div>;
    }
}

Appcontainer.jsx - the app container for displaying the class

'use strict';
import  React, {Component}   from 'react';
import Users                from './Modules/Users';
import AddUser              from './Controllers/AddUser';
import axios                from 'axios';

var Base = require('./Statics.Common');

export default class AppContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            users: []
        }
        this.getAllUsers();
    }

    getAllUsers() {
        axios.get(Base.API + '/').then(res => {
            this.setState({
                users: res.data.data || res.data
            });
        })
    }

    addUser(user) {
        axios.post(Base.API + '/', {name: user.name}).then(result => {
            if(result.status == 200) {
                this.getAllUsers();
            }
        }).catch(err => {
            alert(err);
        })
    }

    render() {
        return <div>
           <h2>Users App</h2>
            <AddUser addUser={user => this.addUser(user)}/>
            <Users users={this.state.users} getAllUsers = {() => this.getAllUsers()}/>
        </div>;
    }
}

statics.common.jsx - this has some api urls for node and spring boot

var CommonDetails = function() {
    //this.API = 'http//localhost:8081'; // node api
    this.API = 'http://localhost:8084'; // springboot api
}

module.exports = new CommonDetails();

标签： reactjs

Answer 1

APP.JSX

'use strict';
import React            from 'react';
import {render}         from 'react-dom';
import AppContainer     from './AppContainer.jsx';

render(<AppContainer/>, document.getElementById('app'));

应用容器.jsx

'use strict';
import React, {Component}   from 'react';
import Users                from './Modules/Users';
import AddUser              from './Controllers/AddUser';
import axios                from 'axios';

var Base                    = require('./Statics.Common');

export default class AppContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            users: []
        }
        this.getAllUsers();
    }

    getAllUsers() {
        axios.get(Base.API + '/').then(res => {
            this.setState({
                users: res.data.data || res.data
            });
        })
    }

    addUser(user) {
        axios.post(Base.API + '/', {name: user.name}).then(result => {
            if(result.status == 200) {
                this.getAllUsers();
            }
        }).catch(err => {
            alert(err);
        })
    }

    render() {
        return <div>
           <h2>Users App</h2>
            <AddUser addUser={user => this.addUser(user)}/>
            <Users users={this.state.users} getAllUsers = {() => this.getAllUsers()}/>
        </div>;
    }
}

Statics.Common.js

var CommonDetails = function() {
    //this.API = 'http//localhost:8081'; // node api
    this.API = 'http://localhost:8084'; // springboot api
}

module.exports = new CommonDetails();

webpack.config.js

const path = require('path');

module.exports = {
    entry: path.resolve(__dirname, "app.jsx"),
    output: {
       path: path.resolve(__dirname, "dist"),
       filename: 'bundle.js'
    },
    module: {
       rules: [
           {
               test: /\.jsx?$/,
               use: {
                   loader: "babel-loader",
                   options: {
                       presets: ["env", "es2015", "react"]
                   }
               }
           }
       ]
    },
    resolve: {
       extensions: [".js", ".jsx"]
    },
    devServer: {
       contentBase: path.join(__dirname, "/"),
       compress: true
    },
    devtool: "source-map"
};