直接调用子路径时不渲染React组件答案

【问题标题】：React component not rendered when sub path is called directly直接调用子路径时不渲染React组件
【发布时间】：2020-06-20 20:54:18
【问题描述】：

我有一个服务器端渲染的 React 应用程序，我在其中使用 HashRouter 进行反应路由（v5）。我的路线是这样的

<HashRouter basename="/">
   <Layout {...config} />
</HashRouter>

<Switch>
  <Route exact={true} path="/" component={LPComp} />
  <Route exact={true} path={this.props.siteBanner.Red} component={bannerPage} />
</Switch>

当我点击localhost:8888/parent/ 并且一旦它被加载，如果我在同一个窗口中点击localhost:8888/parent/banner，bannerPage 组件就会呈现正常。但是我直接点击localhost:8888/parent/banner（考虑在新标签中），然后组件没有正确渲染。

任何想法为什么会发生这种情况？

当我点击localhost:8888/parent/banner 时，我可以看到 LPComp（默认路由）也被加载，然后它突然消失，bannerPage 组件渲染不正确。

提前致谢

【问题讨论】：

这可能不足以回答你，但我可以粗略地说，你必须使所有路线独立，我的意思是独立的意思是没有路线应该依赖于任何路线的数据，无论是父路由，由于缺少数据来加载或呈现您的 html 或某些功能可能会失败，因此导致加载不正确等等......
好的。这可能是一个问题，但知道为什么在我点击 /parent/bannerPage 时默认路由会在bannerPage组件加载之前出现和消失一秒钟
您是否在横幅页面中配置了任何路由，例如是否缺少某些数据转到主页或类似的东西...粗略猜测但必须查看
@pavankumar 没有，没有其他路线
这能回答你的问题吗？ React-router urls don't work when refreshing or writing manually

标签： reactjs react-router

【解决方案1】：

这种行为是有道理的，因为您的路线基于一个 prop/state this.props.siteBanner.Red。所以第一件事是一旦你进入这个组件，就放一个console.log。

  console.log(this.props.siteBanner.Red)

在您的第一种情况下，您从其父组件访问该组件，这样最有可能解析道具。

在第二种情况下，您可以直接访问它，当然也可以从它的父级访问它，但很可能没有时间让道具快速得到解决。几种可能性

useEffect 是更新这个变量
需要鼠标点击才能获取值
setTimeout 用于延迟
回调是用来获取这个变量的

你可以说解决这个道具有 50 毫秒的延迟，但你需要自己找出原因。动态路由是比较高级的东西，很容易有永久路由。

【讨论】：

【解决方案2】：

感谢大家的及时回复，我可以通过在服务器端配置的静态路由器设置location=(req.url) 来解决这个问题。通过这个例子，我得到了我所缺少的更大的图景。 https://medium.com/javascript-in-plain-english/server-side-rendering-in-react-redux-ab0af31c9c4b

【讨论】：