为什么浏览器在React的嵌套路由中加载空白页面

问题描述

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

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;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）