Question

我有这些组成部分。我想将所有内容都变成动态网址。例如，在浏览器中访问时，http://localhost:3000/houses/1我要显示房屋1。

应用程序中的其他内容运行正常。我只想解决实现动态路由的问题。

数据是从json文件中获取的

db.json文件

[
  {
    "houseId": 1,
    "name": "House 1",
    "photos": [
      "house1_001.jpg",
      "house1_002.jpg",
      "house1_003.jpg",
      "house1_004.jpg"
    ]
  },
  {
    "houseId": 2,
    "name": "House 2",
    "photos": [
      "house2_001.jpg",
      "house2_002.jpg",
      "house2_003.jpg",
      "house2_004.jpg"      
    ]
  },
  {
    "houseId": 3,
    "name": "House 3",
    "photos": [
      "house3_001.jpg",
      "house3_002.jpg",
      "house3_003.jpg",
      "house3_004.jpg"     
    ]
  } 
]

路由器组件

    import React from 'react';
    import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom'

    import App from './App'
    import Intro from './Intro'
    import Houses from './Houses'
    import House from './House'


    export default props => (
      <Router>
        <Route exact path='/' render={() => <App />} >
          <Route exact path='/intro' render={() => <Intro />} />
          <Route exact path='/houses' render={() => <Houses />} />
          <Route exact path='/houses/:houseId' render={(props) => <House {...props} />} />
        </Route>
      </Router>
    )

房屋组件

import React, { Component } from 'react'
import House from './House'

var data = require('./db.json');

class Houses extends Component {
  constructor(props) {
    super(props);
    this.state = {
      houses: []
    };
  }

  componentDidMount() {
    this.setState({
      houses: data
    })
  }

  render() {
    const { houses } = this.state;
    return (
      <div className="content house">
        {
          houses.map((house, index) => {
            return (
              <div>            
                <House house={house} />
              </div>
            )
          })
        }
      </div>
    )
  }
}

export default Houses


**House Component**

import React, { Component } from 'react';

class House extends Component {
  constructor(props) {
    super(props)
    this.state = {
    houseId: ""
    }
  }

  componentDidMount() {
    this.setState({
      houseId: this.props.match.params.id
    })
  }

  render() {
    return (
      <div>
        <h3>{this.props.house.name}</h3>
        <ul>
          {this.props.house.photos.map((photo, index) => {
            return (
              <li><img src={`/images/${photo}`} /></li>
            )
          })
          }
        </ul>
      </div>
    )
  }
}


export default House;

房屋组件

import React, { Component } from 'react';

class House extends Component {
  constructor(props) {
    super(props)
    this.state = {
    houseId: ""
    }
  }

  componentDidMount() {
    this.setState({
      houseId: this.props.match.params.id
    })
  }

  render() {
    return (
      <div>
        <h3>{this.props.house.name}</h3>
        <ul>
          {this.props.house.photos.map((photo, index) => {
            return (
              <li><img src={`/images/${photo}`} /></li>
            )
          })
          }
        </ul>
      </div>
    )
  }
}


export default House;

Answer 1

将json数据传递到<House/>组件，并使用id显示正确的数据。

import React, { Component } from 'react';
const data = require('./db.json');

class House extends Component {
  constructor(props) {
    super(props)
    this.state = {
      houses: data,
    }
  }

  render() {

    const houseId = this.props.match.params.houseId;

    return (
      <div>
        <h3>{this.state.houses[houseId].name}</h3>
        <ul>
          {this.state.houses[houseId].photos.map((photo, index) => {
            return (
              <li><img src={`/images/${photo}`} /></li>
            )
          })
          }
        </ul>
      </div>
    )
  }
}


export default House;

创建两个组件，一个将在房屋中渲染，一个将在house/1上渲染

 // rendered inside Houses
 class House extends Component {

  render() {
    return (
      <div>
        <h3>{this.props.house.name}</h3>
        <ul>
          {this.props.house.photos.map((photo, index) => {
            return (
              <li><img src={`/images/${photo}`} /></li>
            )
          })
          }
        </ul>
      </div>
    )
  }
}

HouseInfo，按查询参数显示数据

import React, { Component } from 'react';
const data = require('./db.json');

class HouseInfo extends Component {
  constructor(props) {
    super(props)
    this.state = {
      houses: data,
    }
  }

  render() {

    const id = this.props.match.params.houseId;
    const houseId = id >= 1 ? id - 1 : 0; 

    return (
      <div>
        <h3>{this.state.houses[houseId].name}</h3>
        <ul>
          {this.state.houses[houseId].photos.map((photo, index) => {
            return (
              <li><img src={`/images/${photo}`} /></li>
            )
          })
          }
        </ul>
      </div>
    )
  }
}

export default HouseInfo;

路由器

import React from 'react';
import { BrowserRouter as Router, Route, NavLink } from 'react-router-dom'

import App from './App'
import Intro from './Intro'
import Houses from './Houses'
import House from './House'
import HouseInfo from './HouseInfo'


export default props => (
  <Router>
    <Route exact path='/' render={() => <App />} >
      <Route exact path='/intro' render={() => <Intro />} />
      <Route exact path='/houses' render={() => <Houses />} />
      <Route exact path='/houses/:houseId' render={(props) => <HouseInfo {...props} />} />
    </Route>
  </Router>
)

Answer 2

整个代码段都是正确的，只是您错误地匹配了 params id，更改房屋组件中的以下代码

this.setState({
  houseId: this.props.match.params.houseId
})

您必须在组件内部使用相同的参数ID，即 houseId

使用处于状态的HouseId，即House组件中的（this.state.houseId），遍历json数据并找到houseId并显示相应的数据。

Answer 3

我看不到您要传递给House组件的哪些道具，但我的猜测并非完全是预期的。试试这个：

$('#chiffres .titre:nth(3)').text('Your Text');

或不使用withRouter：

import { withRouter } from 'react-router-dom';
...
export default withRouter(Houses);

，在您的Route中，您的参数值将指定为houseId，因为它应该在House组件中：

  <Route exact path='/houses/:houseId' render={House} />

ReactJS-关于动态路由的问题

3 个答案: