javascript - 为什么浏览器在反应的嵌套路由中加载空白页面

Question

如您所见，我想通过使用另一个组件来获取新闻列表，然后通过单击每个组件来显示新闻项目的全部内容。第一步（显示新闻列表）确实运行，但是当我点击其中一个时，我会转到特定路线，但它是空白的：|
我认为这是因为反应路由器不知道路由，并且我的语法有问题，
如果您**可以**使用此代码，请帮助我。

import React, { useState, useEffect } from 'react';
import {
  Route,
  useHistory,
  Switch
} from 'react-router-dom';
import styled from 'styled-components';
import apis from '../../app/apis';
import cts from '../../app/cts';

const News = (props) => {
  const history = useHistory();

  console.log(history);
  const [news, setNews] = useState(null);

  useEffect(() => {
    console.log({props});
    getNews('556', '556');
  }, []);

  const NewsBox = styled.div`
    margin-top: 20px;
    margin-bottom: 20px;
  `;

  const NewsTitle = styled.h1`
    font-size: 25pt;
  `;

  const NewsDate = styled.h3`
    font-size:18pt;
    color: #aaa;
  `;

  const getNews = async (project, district) => {
    try {
      const { data, status } = await cts('get', apis.getNewsApi(project, district));
      if (status !== 200 && !data) {
        throw new Error('Error fetching data');
      } else {
        console.log(data);
        const newsList = Object.values(data.items).map(item => 
          <div>
          <br />
        <NewsBox>
            <NewsTitle onClick={() => history.push(`/news/${item.id}`)}>
              {item.title}</NewsTitle>
            <br />
            <NewsDate>{item.date}</NewsDate>
          </NewsBox>
          <br />
          </div>
          )
        setNews(newsList);
      }
    } catch (e) {
      console.log(e);
    }
  };

  const SS = ({match}) => <p>say hello to me</p>;

  return (
    <div>
      {
        news
      }
      <Switch>
        <Route
          path="/users/:id"
          exact
          key={() => Math.random()}
          render={() => (
          <SS />)}
        />
      </Switch>
    </div>
  );
};

export default News;

标签： javascriptreactjsreact-routernested-routes