React Route Path показывает пустую страницу

Question

Я пытаюсь получить Singleshow в Main и показать текст по указанному пути

Индекс Singleshow. js

import React, { Component } from 'react';

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

export default SingleShow;

Основной индекс. 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

Если вам нужно только визуализировать некоторые данные, вы можете использовать функциональные компоненты. Это более простой, чем класс компоненты. Для вас случай выглядит так:

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

export default SingleShow;

Answer 2

Вы должны использовать конструктор в вашем компоненте SingleShow

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

, затем в render

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