如何反应加载主页然后路由到其他人

Posted 2023-02-23

【中文标题】如何反应加载主页然后路由到其他人

【英文标题】：How to have react load Home page and then route to others

【发布时间】：2021-09-25 04:37:42

【问题描述】：

我有一个基本的投资组合应用程序，其结构如下：

App.js

function App() 
  return (
    <BrowserRouter>
    <LeftNav />
    <RightNav />
    <NavBar />
      <Switch>
        <Route component=Home path='/' exact />
        <Route component=About path='/about' />
        <Route component=Project path='/projects' />
        <Route component=Contact path='/contact' />
      </Switch>
    </BrowserRouter>
  )

当我单击链接转到生产站点时，它只呈现 LeftNav、RightNav 和 Navbar。我必须单击 Home 组件才能加载主屏幕。

然后我尝试将 Home 组件放在外面，如下所示：

function App() 
  return (
    <BrowserRouter>
    <LeftNav />
    <RightNav />
    <NavBar />
    <Home />
      <Switch>
        <Route component=Home path='/' exact />
        <Route component=About path='/about' />
        <Route component=Project path='/projects' />
        <Route component=Contact path='/contact' />
      </Switch>
    </BrowserRouter>
  )

这是我在单击链接时想要的操作，但是我的组件不会加载。我该如何构建它，以便 Home 组件在初始点击时加载并且我能够导航到其他页面？

【参考方案1】：

您将不得不从默认页面交换您的主页路径：

        <Route component=Home path='/' exact />

到

        <Route component=Home path='/home' exact />          

然后将“重定向”添加到您的 App.js ：

    <Route path="/" exact>                               
      <Redirect to="/home" />
    </Route>

【参考方案2】：

您的第一个版本很好，只需添加重定向并更改主路径

import React from 'react';
import BrowserRouter, Switch, Route, Redirect from 'react-router-dom';  // import Redirect

function App() 
  return (
    <BrowserRouter>
    <LeftNav />
    <RightNav />
    <NavBar />
      <Switch>
        <Route component=Home path='/home' exact />          // change the path
        <Route component=About path='/about' />
        <Route component=Project path='/projects' />
        <Route component=Contact path='/contact' />
        <Route path="/" exact>                                 // Add the redirect
          <Redirect to="/home" />
        </Route>
      </Switch>
    </BrowserRouter>
  )

【讨论】：

这非常有效。所以基本上重定向接受 Home 组件并在点击主 URL 时重定向它？

主url“/”将用户重定向到“home”，如果用户点击“home”，它将到达“home”（这是有道理的）