Question

我从React开始，我很好奇是否有办法更改页面而不重新加载所有html，例如仅更改内容组件。我知道有一种无需更改URL即可更改组件的方法，但我认为，如果URL也更改，则应用程序会更好。

Answer 1

React Router is the exact thing you're looking for

在这里，如何实现所需的功能。

首先，用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>
    )
  }
}

Answer 2

反应路由器就是您要找的

   

  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;

如何更改页面并仅更改一个组件，而不更改整个html

2 个答案: