react-router-dom如何做到路由切换而不刷新整个页面，如何配置路由，举个例子

react-router-dom是React官方推荐的路由库，它可以实现在单页应用中切换组件而不刷新整个页面。

首先，需要在React项目中安装react-router-dom库：

npm install react-router-dom

然后，在应用入口文件中，引入BrowserRouter组件，包裹整个应用，即可实现路由的切换。

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

接下来，可以在App组件中配置路由，使用Route组件指定路由对应的组件。

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

function App() {
  return (
    <div>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>
      </nav>

      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </div>
  );
}

export default App;

在上面的例子中，使用了Link组件指定了三个路由，分别对应Home、About和Contact组件。而Switch组件则是用来包裹Route组件的，它会按照路由的顺序，从上到下依次匹配，并只渲染第一个匹配到的组件。

需要注意的是，当使用Link组件时，需要确保BrowserRouter组件已经包裹整个应用。否则会报错。

使用react-router-dom库可以非常方便地实现路由切换，避免了整个页面的刷新，提高了应用的性能。