Question

我正在尝试创建一个多页面的React应用程序。反应路由器是正确的方法吗？

由于只有一个名为 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;

这是否意味着在HTML加载页面之前必须渲染所有页面？还是我错了？

有更好的方法吗？

Answer 1

是的，继续使用React Router。

没有，只会显示与路由器路径匹配的页面/组件路由。

但是让我澄清一下...

当您说：

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

我相信您的意思是加载（网站/应用程序文件）但未呈现。

Render表示路由页面/组件将存在于DOM中。因此，加载是，渲染为否。

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

Answer 2

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

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

这不是说所有页面都必须在HTML加载之前呈现这页纸？还是我错了？

否，在任何给定时间仅会呈现与特定路由/ URL匹配器关联的组件。

React如何使用react-router呈现app.js中的多个页面？

2 个答案: