ReactRoutingwithNavbar僅顯示空白螢屏

我一直在嘗試路由到我的反應站點中的不同頁面，但由于某種原因，一旦我添加任何路由，整個頁面就會變為空白。我正在使用 npm 并回應引導程式

這是我的代碼，我正在嘗試路由到 Home 等簡單頁面。

應用程式.js

import Artists from './Artists';
import Home from './Home';
import Music from './Music';
import Navigation from "./Navigation.js";
import 'react-bootstrap/dist/react-bootstrap.min.js';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Footer from './footer'
function App() {
return (
<div className="App">
<Router>
<Navigation></Navigation>
<Route exact path="/" component={Home}></Route>
<Route path="/artists" component={Artists}></Route>
<Route exact path="/music" component={Music}></Route>
</Router>
<Footer/>
</div>
);
}
export default App;

導航.js

import React from "react";
import { Button, Navbar, Container} from 'react-bootstrap'
import { Link, Router, Route } from "react-router-dom";
import Nav from "react-bootstrap/Nav";
import { LinkContainer } from "react-router-bootstrap";
import Artists from './Artists'
import Home from './Home'

const Navigation = () => {
  return (


  <Navbar bg="light" variant="light">

    <Navbar.Brand>
      <img src={require('.//Nothing Iconic Reccords.png')} width="135"
        height="135"/>
    </Navbar.Brand>

    <Nav className="nav-link">
    <LinkContainer to="/">
<Nav.Link>Home</Nav.Link>
</LinkContainer>
<LinkContainer to="/artists">
<Nav.Link>Artists</Nav.Link>
</LinkContainer>
<LinkContainer to="/music">
<Nav.Link>Music</Nav.Link>
</LinkContainer>

    </Nav>

  </Navbar>


  );
};

export default Navigation;

uj5u.com熱心網友回復：

我假設你正在使用 react router 5 給定路由器語法。如果是這樣，那么您在 App.js 檔案中缺少一個重要的包裝器<Switch>，該包裝器用于包裝您的路線（元素）。<Route>這是描述結構的快速入門指南。

如果沒有這個包裝器（或檔案中描述的類似包裝器），react router 不知道您要應用什么匹配邏輯，因此它無法呈現特定的頁面/路由。

uj5u.com熱心網友回復：

嘗試使用路由，將路由放入路由并在路由中添加道具元素：

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

<Router>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/artists" element={<Artists />} />
    <Route path="/music" element={<Music />} />
  </Routes>
</Router>

uj5u.com熱心網友回復：

你需要仔細閱讀 react-router-dom 檔案。根據檔案，

1. 您必須從 App.js 檔案中的“react-router-dom”匯入 { BrowserRouter as Router, Routes, Route }。
2. 您只需要將各自的路線包裝在元素內，并將所有其他組件留在元素之外，即組件。
3. 您需要在標簽內以 HTML 元素的形式撰寫組件，例如 "<Route exact path="/" component={} />"

您的 App.js 檔案應與以下檔案相同：

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Artists from './Artists';
import Home from './Home';
import Music from './Music';
import Navigation from "./Navigation.js";
import 'react-bootstrap/dist/react-bootstrap.min.js';
import Footer from './footer'

export default function App() {
  return (
    <Router>
        <div>
            <Navigation/>
            <Routes>
                 <Route exact path="/" component={<Home />} />
                 <Route path="/artists" component={<Artists />} />
                 <Route exact path="/music" component={<Music />} />
            </Routes>
      </div>
    </Router>
  );
}


export default App

如果您想在某些操作上獲取特定組件，例如 onClick，例如在導航組件內部，您只需要從“react-router-dom”匯入 { LinkContainer } 或 { Link }，因為 Link 和 LinkContainer 的行為方式相同. 所以你不需要在一個檔案中一次匯入它們。在 Navigation.js 檔案中匯入 Router 和 Route 沒有意義。由于您沒有在 Navigation.js 檔案中使用 Artist 和 Home 組件，因此您不需要在 Navigation.js 中匯入它們。

您的 Navigation.js 檔案應與以下檔案相同：

import { link } from "react-router-dom"
import React from "react";
import { Button, Navbar, Container} from 'react-bootstrap'
import Nav from "react-bootstrap/Nav";

const Navigation = () => {
    return (
        <Navbar bg="light" variant="light">
            <Navbar.Brand>
                <img src={require('.//Nothing Iconic Reccords.png')} width="135" 
                height="135"/>
            </Navbar.Brand>

            <Nav className="nav-link">
                <LinkContainer to="/">
                    <Nav.Link>Home</Nav.Link>
                </LinkContainer>
                <LinkContainer to="/artists">
                    <Nav.Link>Artists</Nav.Link>
                </LinkContainer>
                <LinkContainer to="/music">
                    <Nav.Link>Music</Nav.Link>
                </LinkContainer>

            </Nav>
        </Navbar>
    );
};

export default Navigation;

標籤：javascript 反应 npm 反应路由器

上一篇：使用python從文本/javascript中提取資料

下一篇：如果至少有一個元素匹配，則回傳所有陣列