我是第一次使用路由器。如何在第一个组件打开时自动渲染第一个组件？

Posted 2023-02-22

【中文标题】我是第一次使用路由器。如何在第一个组件打开时自动渲染第一个组件？

【英文标题】：I'm using router for the first time.. How can I make route to render first component automatically when it's opened?

【发布时间】：2021-06-05 03:11:24

【问题描述】：

例如，当我访问我的服务器时，http://localhost:3000/my_app/ 它不会呈现“家”。我的页面只会显示导航组件。 但是当我单击导航栏上的主页按钮时，它会呈现“主页”组件。 我不知道如何让它在我连接到服务器时默认自动呈现“主页”。我该如何解决这个问题？

这是 App.js 的代码

import React from "react";
import  BrowserRouter, Route  from "react-router-dom";
import Home from "./routes/Home";
import Recipes from "./routes/Recipes";
import About from "./routes/About";
import Navigation from "./components/Navigation";
import ScrollToTop from "./components/ScrollToTop";

function App() 
  return (
    <div>
      <BrowserRouter>
        <Navigation />
        <Route path="/" exact=true component=Home />
        <Route path="/recipes" component=Recipes />
        <Route path="/about" component=About />
        <ScrollToTop />
      </BrowserRouter>
    </div>
  );


export default App;

这是 Home.js 的代码

import React from "react";
import main_img from "../img/cocktail_main.jpg";
import "./Home.css";

function Home() 
  return (
    <div className="home_container">
      <img src= main_img  className="main_img"  />
    </div>
  );


export default Home;

【问题讨论】：

为什么你的网址中有my_app？您似乎没有将其声明为您的应用程序的基本路线。

可以分享nav组件代码吗？主页链接指向什么？

【参考方案1】：

首先将路由包装在 Switch 组件中，以强制它呈现第一个匹配项。然后，如果您想为其他路由器呈现特定组件，请尝试使用重定向组件。请阅读 Switch 和 Redirect 的这部分文档

    <Switch>
        <Route path="/" exact=true component=Home />
        <Route path="/recipes" component=Recipes />
        <Route path="/about" component=About />
        <Redirect to="/" />
    </Switch>