React-router 不起作用。 我该如何解决？

Question

I'm trying to do a SPA with react-router. I'm trying to make a two components PhotosList - this is a list of photos and Photo - this is a transition for watching single photo. Component with path='/' work, but component with path='/photo' doesn't work and I have a 404 error. My site is https://mishindmitry.site

Here my code. AssyncApp.js

class AsyncApp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isFetching: false,
      error: false,
      photos: []
    };
    this.handleScroll = this.handleScroll.bind(this);
  }

  componentDidMount() {
    const { photos, getPhotos } = this.props;

    window.addEventListener("scroll", this.handleScroll);

    return getPhotos(photos);
  }

  componentWillUnmount() {
    window.removeEventListener("scroll", this.handleScroll);
  }

  handleScroll() {
    const { photos, getPhotos } = this.props;
    const windowHeight = window.innerHeight;
    const scrollTop = window.scrollY;
    const clientHeight = document.body.clientHeight;

    const scrollOnBottom = clientHeight - scrollTop;
    if (windowHeight - scrollOnBottom === 0) {
      return getPhotos(photos);
    }
  }

  render() {
    return (
      <div>
        <BrowserRouter>
          <div>
            <Switch>
              <Route
                path="/"
                exact
                render={() => {
                  return <PhotosList photos={this.props.photos} />;
                }}
              />
              <Route path="/photo" component={Photo} />
            </Switch>
          </div>
        </BrowserRouter>
        <div>
          <button onClick={this.props.getPhotos} className="loadphoto_btn">
            Загрузить еще
          </button>
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    photos: state.photos
  };
};

const mapDispatchToProps = dispatch => {
  return {
    getPhotos: photos => dispatch(getPhotos(photos))
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(AsyncApp);

Root.js

import React, { Component } from "react";
import configureStore from "../configureStore/index.js";
import AsyncApp from "./AsyncApp.js";
import { Provider } from "react-redux";

const store = configureStore();

export default class Root extends Component {
  render() {
    return (
      <Provider store={store}>
        <AsyncApp />
      </Provider>
    );
  }
}

PhotosList.js

export default class PhotosList extends Component {
  render() {
    return (
      <ul className="flex-container">
        {this.props.photos.map((photo, id) => (
          <li key={id}>
            <div className="user_info">
              <Link to="/photo">
                <img src={photo.urls.thumb} alt="photo" key={id} />
              </Link>
              <div className="info_container">
                <div className="container__btn_like">
                  <button className="btn_like">
                    <svg
                      className="svg_img"
                      version="1.1"
                      viewBox="0 0 32 32"
                      width="16"
                      height="16"
                      aria-hidden="false"
                    >
                      <path d="M17.4 29c-.8.8-2 .8-2.8 0l-12.3-12.8c-3.1-3.1-3.1-8.2 0-11.4 3.1-3.1 8.2-3.1 11.3 0l2.4 2.8 2.3-2.8c3.1-3.1 8.2-3.1 11.3 0 3.1 3.1 3.1 8.2 0 11.4l-12.2 12.8z"></path>
                    </svg>
                  </button>
                  {" " + photo.likes}
                </div>
                <div className="user_photo_name">
                  <a href={photo.user.links.html} className="user_link">
                    <img
                      src={photo.user.profile_image.small}
                      className="user_img"
                    />
                    <h3 className="user_name">{photo.user.name}</h3>
                  </a>
                </div>
              </div>
            </div>
          </li>
        ))}
      </ul>
    );
  }
}

and Index.js

render(<Root />, document.querySelector(".fixed-container"));

Answer 1

You may follow this solution where you will get an idea of routing in react using 'react-router-dom' instead of react-router