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

Question

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

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

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 关联的组件才会在任何给定时间呈现。