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

Question

我有一个具有以下结构的基本投资组合应用程序：

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>
  )
}

当我点击 link 进入生产站点时，它只呈现 LeftNav、RightNav 和 Navbar。我必须单击主屏幕组件才能加载主屏幕。

然后我尝试将 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>
  )
}

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

Answer 1

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

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>
  )
}

Answer 2

您必须将您的主页路径从默认页面更改为：

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

至

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

然后将 'Redirect' 添加到您的 App.js :

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

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

How to have react load Home page and then route to others

javascript

components

routes

reactjs

react-router