是否有反应路由器？

Question

我目前正在使用 create-react-app 制作一个反应应用程序 这是一个包含多个部分的单页（主页/关于/联系...） 当然，每个部分都是我导出的组件。 目前我的 App.js 是这样的：

App.jsx

import Menu from './components/menu/Menu';
import Header from './components/header/Header';
import Home from './components/sections/00_home/Home';
import About from './components/sections/01_about/About';
import Works from './components/sections/02_works/Works';
import Contact from './components/sections/03_contact/Contact';

const App = () => {
   return (
      <div className={styles.Container}>
         <Menu />
         <Header />
         <Home />
         <About />
         <Works />
         <Contact />
      </div>
   );
};

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';

/* CSS */
import './index.css';

/* JSX */
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

要从一个部分转到另一个部分，我使用锚标记 href 的 例如，在主页部分，我有指向其他部分的链接，与菜单相同。

---

到目前为止，对我来说一切都很好，但我想知道一个问题。 我应该使用 react-router 吗？如果是这样，为什么？ 我应该在什么情况下使用它？ 如果有人能在这方面启发我，那就太好了。

我目前的编码方式是非传统的吗？

Ced.

Answer 1

从您的问题来看，您可能误解了单页应用程序 (SPA) 理论，这是我们必须采用 React Router 而不是 html hrefs 的主要原因。来自 quick gg 的一个简短清晰的概述是 "React Router，一个动态的客户端路由，允许我们构建一个带导航的单页 Web 应用程序，而无需在用户导航时刷新页面。React Router 使用组件结构调用显示相应信息的组件。”

因此，当您拥有一些共享组件并且想要编写更少的代码并避免在用户导航时重新加载非常烦人时，React 路由器是您需要的解决方案。

Answer 2

两者有一些非常重要的区别：

1. React-router：您可以定义您想要访问的链接，并在 Link 标签的帮助下定义其他组件中的 URL。在这种情况下，Link 标签不会刷新页面，而是会转到相应的页面，但a href 会刷新页面。

2. 您可能很难在组件之间传递信息，因为它是 react 背后的一个重要概念。

1234563 /classes/teachers 页面，但您可能想转到 /teachers URL。使用Link和路由器的lp，当你提供/teachers时，它会将你重定向到这个URL

我也开始研究 react，这些是我所经历的。