javascript - 是否使用 React-router？

Question

我目前正在使用 create-react-app 制作一个 React 应用程序这是一个包含多个部分的页面(主页/关于/联系...)当然，每个部分都是我导出的组件。目前我的 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'));

要从一个部分转到另一部分，我使用 anchor 标记 href例如，在主页部分中，我有指向其他部分的链接，菜单也是如此。

<小时/>

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

我目前的编码方式是否非常规？

塞德。

Answer 1

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

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