React.js 设置默认路由

React.js 是一个流行的用于构建用户界面的 JavaScript 库，它提供了一种组件化的开发方式，使得开发者可以更加方便地构建复杂的应用程序。在 React.js 中，路由常常被用来控制应用程序的导航，而设置默认路由则是常见的需求。

安装 react-router-dom

React.js 提供了一个叫做 react-router-dom 的路由库，它可以方便地帮助我们实现应用程序的导航。首先需要安装该库：

npm install react-router-dom

创建路由

我们可以在应用程序的根组件中创建路由，例如：

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

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

在上面的例子中，我们使用了 BrowserRouter 来创建一个容器，然后在 Switch 组件中定义了三个 Route 组件，分别对应首页、关于我们和联系我们三个页面。其中，exact 属性表示只有当路径完全匹配时才渲染对应的组件。

设置默认路由

如果我们希望在应用程序启动时就自动跳转到首页，我们可以设置一个默认路由。最简单的方式是使用 Redirect 组件，例如：

import { Redirect } from 'react-router-dom';

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

        <Redirect to="/" />
      </Switch>
    </Router>
  );
}

在上面的例子中，我们在 Switch 组件中的最后添加了一个 Redirect 组件，指定了默认路由为首页。当用户访问其他路径时，React.js 就会自动跳转到该默认路由。

总结

React.js 提供了一个简便的方式来创建应用程序路由，并且还支持设置默认路由。通过使用 react-router-dom 库中的组件，我们可以快速地实现应用程序的导航功能。