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'));

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

到目前为止对我有好处，但我想知道一个问题。我应该使用 反应路由器 吗？如果是这样，为什么？在什么情况下应该使用它？如果有人可以启发我，那就太好了。

我当前的编码方式是非常规的吗？

Ced。

Answer 1

从您的问题出发，也许您误解了单页应用程序（SPA）理论，这是我们必须采用React Router而不是html hrefs的主要原因。快速gg的简要概述是，“ React Router是一种动态的客户端路由，它使我们能够构建具有导航功能的单页Web应用程序，而无需随着用户导航刷新页面。React Router使用组件结构调用显示适当信息的组件。”

因此，当您拥有一些共享组件并且希望编写更少的代码并避免在用户浏览时很烦的时候避免重载，那么React Router是您需要的解决方案。

Answer 2

两者之间的区别非常重要：

反应路由器：您可以定义要访问的链接，并可以在Link标记的帮助下在其他组件中定义URL。在这种情况下，Link标签不会刷新页面，而是会转到相应页面，但是a href将刷新页面。
您可能很难在组件之间传递信息，因为这是反应背后的重要概念。
另一个例子，例如，如果您位于/classes链接上，并且使用了a href标签，那么它将重定向到您（例如，您使用的是相对路径）转到/classes/teachers页面，但是您可能需要转到/teachers URL。使用链接和路由器的lp，当您提供/teachers时，它将重定向您到该URL

我也已经开始进行反应，这就是我遇到的要点。

反应路由器还是没有？

2 个答案: