javascript - How does react render multiple pages in app.js using react-router? - Stack Overflow

admin管理员组

文章数量:1343362

I'm trying to create a multi-page react application. Is react-router right way to go?

Since there is only one HTML file named, index.HTML that pulls the rendered jsx code from app.js's ponent. And even though we can have the feel of multiple page using react-route; technically isn't it only one-page application that react creates?

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

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

export default App;

Doesn't this mean all the pages must be rendered and loaded before displaying specific page? or am I wrong?

Is there a better way?

I'm trying to create a multi-page react application. Is react-router right way to go?

Since there is only one HTML file named, index.HTML that pulls the rendered jsx code from app.js's ponent. And even though we can have the feel of multiple page using react-route; technically isn't it only one-page application that react creates?

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

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

export default App;

Doesn't this mean all the pages must be rendered and loaded before displaying specific page? or am I wrong?

Is there a better way?

• javascript
• reactjs
• react-router

Share Improve this question Follow edited Oct 18, 2020 at 12:53 Riwaj Chalise asked Mar 30, 2019 at 17:25 Riwaj ChaliseRiwaj Chalise 66711 gold badge1414 silver badges2929 bronze badges 1

• 1 react-router and react are clever enough to not load things that are not needed. Usually your bundler will generate multiple chunks of Javascript to optimize page load. The only ponent that will be rendered will be the one that matches the current path. Each path based on your routing setup will effectively be a separate page that is loaded when the request is made. You will only ever have the one index file but I don't really see what the problem is. – Tom Finney Commented Mar 30, 2019 at 19:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

React is a Single Page Application (SPA) frontend framework. An intuitive definition of what this means is that your web app needs only 1 page load. However, an SPA can support the user experience of having "multiple pages", including changing the url path: e.g. www.app./home -> www.app./about. That is what the react router offers, the ability to associate different url paths to react ponents (www.app./home renders the Home ponent).

The underlying principle of SPAs is that instead of serving a new page, only one html page is served and the framework handles all UI changes via direct DOM manipulation.

Doesn't this mean all the pages must be rendered before the HTML loads the page? or am I wrong?

No, only the ponent associated to particular route/url-matcher will be rendered at any given time.

Yep, keep with React Router.

Nops, only the page/ponent route that match the router path will be rendered.

But let me clarify it...

When you say:

all the pages must be rendered before the HTML loads

I believe you mean loaded (the website/app files) and not rendered.

Render means that the route page/ponent will exist in DOM. So, loaded yes, rendered nope.

You can optimize it using React Code-Splitting and/or playing with Webpack Split Chunks.

本文标签： javascriptHow does react render multiple pages in appjs using reactrouterStack Overflow