react如何使用react-router在app.js中渲染多个页面？

Question

我正在尝试创建一个多页反应应用程序。 react-router 是正确的方法吗？

由于只有一个名为 index.HTML 的 HTML 文件从 app.js 的组件中提取呈现的 jsx 代码。即使我们可以使用 react-route 获得多页面的感觉；从技术上讲，React 创建的不只是一页应用程序吗？

import React from 'react';
import { BrowerRoute as Router, Route } from 'react-router-dom';
import App from './components/About';
import Home from './components/Home';
import Contact from './components/News';
import './App.css'

class App extends Component {
  render() {
    return (
       <Router>
        <div>
        <Route exact path='/' component={Home} />
        <Route path='/about' component={About} />
        <Route path='/news' component={News} />
        <div> 
      </Router>
      
    );
  }
}

export default App;

这是否意味着所有页面都必须在显示特定页面之前渲染和加载？还是我错了？

有没有更好的办法？

Answer 1

React 是一个单页应用程序 (SPA) 前端框架。这意味着的直观定义是您的 Web 应用程序只需要加载 1 个页面。但是，SPA 可以支持具有“多页”的用户体验，包括更改 url 路径：例如www.app.com/home -> www.app.com/about。这就是 react 路由器提供的功能，能够将不同的 url 路径关联到 react 组件（www.app.com/home 呈现 Home 组件）。

SPA 的基本原理是，不是提供一个新页面，而是只提供一个 html 页面，并且框架通过直接 DOM 操作来处理所有 UI 更改。

这是否意味着所有页面都必须在 HTML 加载之前呈现 这页纸？还是我错了？

不，只有与特定路由/url-matcher 关联的组件才会在任何给定时间呈现。

Answer 2

是的，继续使用 React Router。

不，只有匹配路由路径的页面/组件路由才会被渲染。

但是让我澄清一下......

当你说：

所有页面必须在 HTML 加载之前呈现

我相信您的意思是加载（网站/应用程序文件）而不是渲染。

Render 表示路由页面/组件将存在于 DOM 中。所以，加载是的，渲染的不是。

您可以使用React Code-Splitting 和/或使用Webpack Split Chunks 对其进行优化。