我使用Laravel作为后端，使用ReactJS作为前端。在ReactJS中，创建Routes。 在Laravel中，创建Api。当我将参数从ReactJS解析到Laravel时，第一次可以。重新加载这些页面后，仅显示Json

我像这样的“ /：id”尝试了参数路由并工作。但是对于多个对象，它并没有解决。它仅适用于一个对象。

App.js

import React,{ Component } from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter,Route,Switch,browserHistory,IndexRoute } from 'react-router-dom'
import NewApp from './NewApp'
import AppList from './AppList'
import NAVBAR from './NAVBAR'
import Container from './Container'
import MainNavigation from './MainNavigation'
import AppSettingList from './AppSettingList'
import UpdateApp from './UpdateApp'
import {withRouter} from 'react-router';

class App extends Component {
  render () {
    console.log(window.location.pathname);
    return (
      <BrowserRouter>
        <div>
          {/* <Header /> */}
          <NAVBAR />
          <MainNavigation />
          <Switch>

            <Route exact path='/' component={withRouter(Container)} />
            <Route exact path='/dashboard/' component={withRouter(Container)} />
            <Route exact path='/app/' component={withRouter(AppList)} />

            <Route exact path='/app/:id' component={withRouter(UpdateApp)} />

            <Route exact path='/appsetting/' component={withRouter(AppSettingList)} />
            <Route exact path='/app/create' component={withRouter(NewApp)} />

          </Switch>
        </div>
      </BrowserRouter>
    )
  }
}

ReactDOM.render(<App />,document.getElementById('app'))

UpdateApp.js

 import axios from 'axios'
import React,{ Component } from 'react'
import NiftySuccessModal from './alerts/NiftySuccessModal'

class UpdateApp extends Component {
  constructor (props) {
    super(props)

    this.state = {
      name: '',description: '',errors: [],apps : [],id : 0,loading : false,successModal : false
    };
    // binding
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.hasErrorFor = this.hasErrorFor.bind(this);
    this.renderErrorFor = this.renderErrorFor.bind(this);
    this.showSuccessModal = this.showSuccessModal.bind(this);
    this.getapp = this.getapp.bind(this);
    this.gotoApp = this.gotoApp.bind(this);
  }

  getapp(appId){


    axios.get(`/app/${appId}`).then(response => { // return value
        this.setState({
            apps: response.data.apps,name : response.data.apps.name,id : response.data.apps.id
        });
        console.log(response.data.apps);

    });

  }
  componentDidmount () {
    const appId = this.props.match.params.id;
    this.getapp(appId);
  }

  gotoApp(){  
    this.props.history.push('/app');
  }

  handleChange(e){
    this.setState({
        name: e.target.value
    });
}

  showSuccessModal(e){
    this.setState({
      successModal : true
    });


    setTimeout(() => {
      this.setState({
        successModal: false
      })
      },10000);

  }


  hasErrorFor (field) {
    return !!this.state.errors[field]
  }

  renderErrorFor (field) {
    if (this.hasErrorFor(field)) {
      return (
        <span classname='invalid-feedback'>
          <strong>{this.state.errors[field][0]}</strong>
        </span>
      )
    }
  }



  handleSubmit(e){
    e.preventDefault();

    const params = {
        id : this.state.id,name: this.state.name      
    }

        console.log('Update');
        axios
          .post('/app/update',params)
          .then(response => {
            console.log('Success');
          })
          .catch(error => {
            console.log('Error');
            this.setState({
              errors: error.response.data.errors
            });

          })
}

  render () {
    return (

        <div id="content-container">
                <div id="page-head">

                <div classname={"pad-all text-center"}>
                <h3>Welcome back to the Dashboard.</h3>
                <p>Scroll down to see quick links and overviews of your Server,To do list,Order status or get some Help using Nifty.</p>
                </div>
                                </div>
            <div id="page-content">

      <div classname={"row"}>
        <div classname={"col-md-1"}></div>
      <div classname={"col-lg-9"}>

      <NiftySuccessModal show={this.state.successModal} > Successfully Updated! </NiftySuccessModal>

          <div classname={"panel"}>
              <div classname={"panel-heading"}>
                  <h3 classname={"panel-title"}>App </h3>
              </div>


              <form classname={"panel-body form-horizontal form-padding"} onSubmit={this.handleSubmit}>

                  <div classname={"form-group"}>
                      <label classname={"col-md-3 control-label"} >App Name</label>
                      <div classname={"col-md-9"}>
                          <input type="text"
                          name='name'
                          id='name'
                          onChange={this.handleChange}
                          value={this.state.name}
                          classname={"form-control"}
                          maxLength="255"
                          placeholder="App Name..."
                          required  classname={"form-control"} placeholder="Text" />
                          <small classname={"help-block"}>This is a help text</small>
                      </div>
                  </div>
                  <div classname={"form-group demo-nifty-btn col-md-3"}>
                  <input type="submit" onClick={this.showSuccessModal} value="Update" classname={"form-control btn btn-primary"} />
                  </div>
              </form>
            </div>
            </div>
            </div>
          </div>{/* End <!--Page content--> */}

          </div> // End <!--CONTENT CONTAINER-->
    )
  }


}

export default UpdateApp

！[重新加载之前]：（https://i.imgur.com/rWqFo9Y.png）  ！[重新加载后]：（https://i.imgur.com/maR3x1S.png）