Reactjs 和 node js 路由问题答案

【问题标题】：Reactjs and node js routing issueReactjs 和 node js 路由问题
【发布时间】：2019-11-28 18:01:36
【问题描述】：

我正在处理一个项目，但卡在了路由上。我想从一个组件导航到另一个组件，但我不想更改页面的 url 例如：如果是http://localhost:3000/，那么在我点击链接或按钮后就会是这个它不会转到http://localhost:3000/yourEnteredpath。希望您能理解我的问题，如果没有，请通过我的邮件与我联系。亲爱的用户尽快完成它，因为我没有足够的时间在这个截止日期前工作，这个项目距离现在只有 3 天。谢谢！！为了您的宝贵时间

【问题讨论】：

标签： node.js reactjs routing

【解决方案1】：

https://reacttraining.com/react-router/web/api/MemoryRouter

这是你想要的吗？正如官方网站所说：<Router> 将您的“URL”历史记录在内存中（不会读取或写入地址栏）。

【讨论】：

先生，我正在制作一个职位发布表单，如果您填写此表单并单击下一步按钮，则可以在此 url payforworks.com/project/post-job 上看到该表单加载组件但 url 没有更改，我不明白教程和文档，所以你能给我一个代码sn-p
尝试使用 CSS 来控制组件的可见性。不要使用路由。

【解决方案2】：

一种简单的方法是在同一页面上有条件地渲染组件。它不会更改 URL，还会加载您要显示的第二个组件。例如：

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

Code sample from Official React documentation

【讨论】：

【解决方案3】：

不确定您为什么不想使用路由和路径。在我看来，这将是最好的方法。

但是回答这个问题，您可以通过设置一个状态变量来为哪个组件渲染。

我不知道您使用的是钩子还是旧的设置状态，但无论哪种情况，您都可以拥有一个父组件，它根据所选状态呈现子组件。

因此，当您单击按钮时，您只需设置显示其他组件的状态。

你可以在你的父组件里有这样的东西。

  switch (selected) {
    case 'componentA':
      return <ComponentA />;
    case 'componentB':
      return <ComponentB />;
    case 'componentC':
      return <ComponentC />;
    default:
      break;
  }
};

然后在按钮中你会 setSelected('componentA') 左右。

如果你使用的是 setState({selected: 'componentA'})

【讨论】：