Reactjs 和节点 js 路由问题

Question

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

Answer 1

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

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

Code sample from Official React documentation

Answer 2

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

但要回答这个问题，您可以通过设置一个状态变量来实现，该状态变量应该呈现给哪个组件。

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

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

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

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

然后在按钮中设置 Selected('componentA') 左右。

如果您使用的是设置状态，则为 setState({selected: 'componentA'})

Answer 3

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

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

Reactjs 和节点 js 路由问题

Reactjs and node js routing issue

routing

node.js

reactjs