在 React 中使用 App 组件作为主页（路径“/”）

Question

这是我的第一个问题，如果已经有人回答，我先表示歉意。我正在学习react，我也开始了一个项目，我的问题是：如何让我的App组件成为主页？还是我必须创建一个组件才能这样做？我使用 react-router-dom 进行导航，就像下面的代码一样，并不断收到消息“没有路由匹配位置”/“”。我怎样才能设置它的路线？我想使用 App 组件而不是使用名为 home 的页面组件。如果我在 post 上做错了什么，再次抱歉。提前致谢。

import React from 'react'
import {BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom'

import Blog from './pages/Blog'
import About from './pages/About'
import Faq from './pages/Faq'
import Market from './pages/Market'

import GlobalStyle from './styles/global'

function App() {

  return (
    <Router>

      <GlobalStyle/>

      <header>
        <nav>
          <Link to="/products">Nosso produtos</Link>
          <Link to="/blog">Diário do Café</Link>
          <Link to="/faq">Cafaq - perguntas frequentes</Link>
          <Link to="/about">Sobre nós</Link>
        </nav>
      </header>        

      <Routes>
        <Route path="/products" element={<Market />} />
        <Route path="/blog" element={<Blog />} />
        <Route path="/faq" element={<Faq />} />
        <Route path="/about" element={<About />} />
      </Routes>
      
      <footer> Footer </footer>
    </Router>
  )
}

export default App

Answer 1

路径为 ="/" 的路由元素将成为您的主页

Answer 2

试试这个；

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

Answer 3

App 组件已经是您的默认组件。只要用 BrowserRouter 组件包裹了 App 组件，任何路径都会渲染 App 组件

// In index.js
import App from "./App";
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
     <App />
  </BrowserRouter>
);

所以我假设你的意思是无论当前路径如何都保持导航栏可见，并且已经完成了，因为放置在 App 组件中的任何内容都将被呈现，并且路径内容将根据中指定的元素进行更改路线。

如果您想创建一个单独的 Home 组件，那么您将创建一个带有路径“/”和 Home Component 元素的路由。

确保您了解路由的工作原理以避免将来出现任何错误

希望对您有所帮助。

在 React 中使用 App 组件作为主页（路径“/”）

Using App component as a home page in react (path "/")

javascript

reactjs

react-router-dom