react-router:如何设置默认子路由并相应地修改URL

React Router是一个用于构建单页面应用的库，它可以帮助我们在React应用中实现路由功能。在React Router中，我们可以使用<Switch>组件来设置默认子路由，并相应地修改URL。

要设置默认子路由，我们可以在<Switch>组件中使用<Route>组件，并将exact属性设置为true。这样，当URL与该路由的路径完全匹配时，该路由将被渲染。

下面是一个示例代码：

import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        <Redirect to="/" />
      </Switch>
    </Router>
  );
}

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function Contact() {
  return <h1>Contact Page</h1>;
}

在上面的代码中，我们使用了<Switch>组件来包裹多个<Route>组件，并使用exact属性将根路径/设置为默认子路由。当URL为/about或/contact时，对应的组件将被渲染。如果URL不匹配任何一个路由路径，我们使用<Redirect>组件将用户重定向到根路径/。