如何在 React 中显示默认视图？

Question

Home我有一个具有三个不同路线的 React 站点，当用户进入该站点时，我希望它自动显示第一个路线，称为。这是我的代码App.js：<Router>  <Navigation />  <Switch>    <Route path="/hypstats" exact component={() => <Home />} />    <Route path="/hypstats/auctions" exact component={() => <AuctionViewer />} />    <Route path="/hypstats/bazaar" exact component={() => <BazaarViewer />} />  </Switch></Router>这是Navigation组件：import React, { Component } from 'react';import { Link } from 'react-router-dom';import "../App.css"function Navigation(props) {    return (        <div className="navbar">            <Link className="navlink" to="/hypstats">HypStats</Link>             <Link className="navlink" to="/hypstats/auctions">Auctions</Link>            <Link className="navlink" to="/hypstats/bazaar">Bazaar</Link>        </div>    )}export default Navigation;

Answer 1

要将任何视图设为默认视图，您可以将以下内容添加到导航中

<Route path="/" exact component={() => <Home />} />

或者你可以写如下：

<Redirect from="/" to="/hypstats"}  />

<Router>

    <Navigation />

        <Switch>

            <Route path="/hypstats" exact component={() => <Home />} />

            <Route path="/hypstats/auctions" exact component={() => <AuctionViewer />} />

            <Route path="/hypstats/bazaar" exact component={() => <BazaarViewer />} />

            **<Route path="/" exact component={() => <Home />} />**

        </Switch>

</Router>

Answer 2

我们使用 basename 属性来告诉站点的基本名称。/hypstats这样，在接下来的路由中，每次添加新路由时，我们就不必在此处手动设置基本名称。React Router 自己管理它。

<Router basename="/hypstats">

  <Navigation />

  <Switch>

    <Route path="/" exact component={() => <Home />} />

    <Route path="/auctions" exact component={() => <AuctionViewer />} />

    <Route path="/bazaar" exact component={() => <BazaarViewer />} />

  </Switch>

</Router>

Answer 3

在您的应用程序组件中的某个位置运行它。

history.push({
     pathname: '/hypstats',
});

您正在使用“react-router-dom”，因此您可以导入：

import { useHistory } from "react-router-dom";

然后你可以使用：

const history = useHistory();

因此，每当用户进入您的 React 应用程序时，它都会打开“/hypstats”。

您可以在 useEffect 中执行此操作。