React 不会在页面刷新或手动 URL 输入时呈现答案

【问题标题】：React doesn't render on page refresh or manual URL entryReact 不会在页面刷新或手动 URL 输入时呈现
【发布时间】：2021-08-20 01:49:26
【问题描述】：

我制作了两个组件。一个是 Articles.js，另一个是 article.js。路由器在 app.js 中。这是来自 app.js 的代码：

 <Router>
      <Switch>
        
        <Route exact path="/articles" component={Articles}>
            </Route>
            <Route path="/article/:id" component={Article}/>
  
      </Switch>
      
    </Router>

我在文章组件中创建了指向"article/:id" 的链接。如果我点击文章页面中的链接，它可以正常工作，但是，如果我尝试重新加载页面或手动输入 id，例如：“article/23”，它不会在页面上呈现任何内容。我在互联网上找到了一些结果，但是其中大多数要么不相关，要么正在使用钩子，我不能将其与类组件一起使用。

在文章组件的 componentDidMount 函数中，我正在调用 getData 函数，该函数从服务器获取数据，然后在验证响应后将数据发送到此函数：

initFunction = (ar)=>{

        let data = ar.map(d=>{
            return(
                <tr><td>{d.id}</td><td>{d.title}</td><td>{moment(d.created_on).format('MMMM,Do YYYY')}</td><td>
                    <Link to={`article/${d.id}`}>Edit</Link> | 
                    <Link to={`article/delete/${d.id}`}> Delete</Link>
                    </td></tr>
            )
        })
        this.setState({
            tableData:<>{data}</>
        })
    }

这个函数只是生成表格行并将它们保存在状态中，我在渲染函数中使用它来显示数据。如果我通过此链接进入文章页面，它会正常工作，但如果手动键入或重新加载，相同的链接将不会呈现任何内容。

这是我在组件中导入的组件：

import ReactPaginate from 'react-paginate';
import { Link } from 'react-router-dom';
import { instanceOf } from 'prop-types';
import { withCookies, Cookies } from 'react-cookie';
import moment from 'moment'

【问题讨论】：

出现此行为时，您是否在控制台中看到任何错误？
@JakeC 当我通过链接访问页面时，我在控制台中没有收到任何错误，但是，在重新加载时，我得到：Uncaught SyntaxError: expected expression, got '
什么是服务器端？节点应用？向我们展示您如何处理那里的请求，因为这看起来像是服务器提供服务的问题。
@GabrielePetrioli 此页面没有从服务器获取任何数据，它只是空的 RN。我只是显示要检查的 ID
你能不能显示 Articles 组件

标签： reactjs react-router react-router-dom

【解决方案1】：

什么是 id 的 initState，我认为您需要将 id 存储到 state 并将 initState 设置为空字符串，它对我有用。

const [myId, setMyId] = useState("")

【讨论】：

此答案被标记为低质量，请提供更多支持信息和解释以更好地回答或删除它

【解决方案2】：

我和你有同样的问题。我从这个帖子中找到了解决方案。

react-router dynamic segments crash when accessed

添加到我的 index.html 中

【讨论】：

请在您的回答中提供更多详细信息。正如目前所写的那样，很难理解您的解决方案。

【解决方案3】：

这里的问题可能是您的服务器未设置为在 /article 路由上为您的应用提供服务。

当您单击应用程序中的链接时，react-router 实际上不会请求向您的服务器发出该路由的请求。相反，它会更新 url 并重新呈现您的应用，从而选择新的路由。

当您直接加载路由时（例如在页面重新加载或在 url 栏中手动输入）时，react 路由器尚未加载。相反，浏览器只是盲目地向该路由发出请求。这是您的应用失败的时候。

【讨论】：