Question

我试图在Main中获取Singleshow并在指定路径中显示文本

单播index.js

import React, { Component } from 'react';

class SingleShow extends Component {
    render () {
        return (
            <div>
                <p>Single Shows</p>
            </div>
        )
    }
}

export default SingleShow;

主index.js

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Shows from '../Shows';
import SingleShow from '../SingleShow';

const Main = props => (
    <Switch>
        <Route exact path="/" component={Shows} />
        <Route path="/shows/:id" component={SingleShow} />
    </Switch>
);

export default Main;

路由精确路径可以正常工作，但是当我在浏览器中输入http://localhost:3000/shows/123时，我会得到一个空白页面。

在Chrome中检查时，我只会看到两件事：

[HMR]等待来自WDS的更新信号...
在Startnull中

Answer 1

您应该在SingleShow组件中使用构造函数

constructor(props) {
  super(props);
  // Don't call this.setState() here!
  this.state = { id:this.props.match.params.id};
}

然后渲染

render () {
    return (
        <div>
            <p>{this.state.id}</p>
        </div>
    )
}

Answer 2

如果只需要渲染一些数据，则可以使用功能组件。它比类组件更简单。对于您来说，情况如下：

const SingleShow = props => (
  <div>
     <p>{props.match.params.id}</p>
  </div>
);

export default SingleShow;

反应路线路径显示空白页

2 个答案: