反应路由器与否？

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's 例如在主页部分，我有指向其他部分的链接，菜单也是如此。

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

我现在的编码方式是否非常规？

Ced.

Answer 1

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

React-router：你可以定义你想去的 links 并在 Link 标签的帮助下你在其他组件中定义 URL .在这种情况下，Link 标签不会刷新页面，而是会转到相应的页面，但 a href 会刷新页面。
你可能很难在组件之间传递信息，因为它是 react 背后的一个重要概念。
另一个例子，如果你在 /classes link 上并且你去 a href 标签，那么它会重定向你（即，您正在使用相对路径）到 /classes/teachers 页面，但您可能想转到 /teachers URL。使用 Link 的 lp 和路由器，当您提供 /teachers 时，它会将您重定向到此 URL

我也开始研究 React，这些是我遇到的问题。

Answer 2

从您的问题来看，您可能误解了单页应用程序 (SPA) 理论，这是我们必须采用 React Router 而不是 html hrefs 的主要原因。快速 gg 的简要概述是 "React Router, a dynamic, client-side routing, allows us to build a single-page web application with navigation without the page refreshing as the user navigates. React Router uses component structure to call components, which display the appropriate information."

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

反应路由器与否？

React-router or not?

javascript

reactjs

react-router

create-react-app

react-router-v4