Как изменить страницу и изменить только один компонент, а не весь HTML

Question

Я начинаю в React, и мне любопытно узнать, есть ли способ изменить страницу, не перезагружая весь HTML, например, меняя только компонент контента.Я знаю, что есть способ изменить компонент без изменения URL-адреса, но я подумал, что если изменить URL-адрес, приложение будет лучше.

Answer 1

React Router - это то, что вы ищете

   

  const AppRouter =()=>(
        <BrowserRouter>
        <div>
        
        <Header/>//where Header components contains the navigation
        <Switch>
        <Route path="/" component={BookListPage} exact={true} />
        <Route path="/create" component={AddBookItem} />
        <Route path="/edit/:id" component={EditBookItem} />
        <Route path="/help" component={HelpPage} />
        <Route component={NotFoundPage} /> 
        </Switch>
        </div>
    </BrowserRouter>
  );
  

  export default AppRouter;
  
  

Answer 2

React Router - именно то, что вы ищете

Здесь вы узнаете, как добиться того, что вы ищете.

Во-первых, оберните ваше приложение с BrowserRouter

import { BrowserRouter } from "react-router-dom";
import React from 'react';
class App extends React.Component {
  return (){
    return (
        <BrowserRouter>
             <SomeComponent />
        </BrowserRouter>
     )
  }
}

Теперь просто используйте Route и Link.Route сообщает приложению, какой компонент отображать на основе текущего маршрута, и Link изменяет URL-адрес без перезагрузки всей страницы

import { Route, Link, Switch } from "react-router-dom";
import React from 'react';
import {Circle, Square} from './someFileWithComponents';

class SomeComponent extends React.Component {
   render(){
     return (
       <div>
          <Link to='/circle' >Circle</Link>
          <Link to='/square' >Square</Link>

          <Switch>
             <Route path='/circle' component={Circle} />
             <Route path='/square' component={Square} />
          </Switch>

      </div>
    )
  }
}