我将项目上传到 github 页面,但注意到除了主页(“/”)之外它没有加载任何内容,无论我在导航栏中转到哪个页面,它都会给出 404。我只是没有尝试这样做,实际上,起初甚至主页都给出了 404 ,我使用了 (process.env.PUBLIC_URL) 并且它有所帮助,但是无论我如何将其粘贴到其他页面中,都没有任何改变。我试图做的事情:
将 HashRouter 和 BrowseRouter 添加到应用程序本身。
向 html 代码本身添加不同的元素。
没有任何帮助。
header.js:
import React, { Component } from "react";
import { Navbar, Nav, Container, Form } from "react-bootstrap";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
//import Home from "../Pages/Home";
import About from "../Pages/About";
import Contacts from "../Pages/Contacts";
import Register from "../Pages/Register";
import Login from "../Pages/Login";
import background from "../Pages/background";
export default class Header extends Component {
render() {
return (
<>
<Navbar
className="navbar-custom"
collapseOnSelect
expand="md"
variant="dark"
>
<Container>
<Navbar.Brand href={process.env.PUBLIC_URL + "/"}>WanderLance</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href={process.env.PUBLIC_URL + "/"}>Home</Nav.Link>
<Nav.Link href="/about">About</Nav.Link>
<Nav.Link href="/contacts">Contacts</Nav.Link>
<Nav.Link href="/login">Login</Nav.Link>
</Nav>
<Form className="cA" inline>
<div className="cA">
<button type="submit">Click here to make smth</button>
</div>
</Form>
</Navbar.Collapse>
</Container>
</Navbar>
<Router>
<Switch>
<Route path={process.env.PUBLIC_URL + "/"} component={background} />
<Route exact path="/about" component={About} />
<Route exact path="/contacts" component={Contacts} />
<Route exact path="/register" component={Register} />
<Route exact path="/login" component={Login} />
</Switch>
</Router>
</>
);
}
}
应用程序.js:
import React from 'react';
import './Pages/App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Header from "./Components/Header";
import { HashRouter } from 'react-router-dom';
function App()
{
return (
<HashRouter>
<Header />
</HashRouter>
);
}
export default App;
问题是:
PS:process.env.PUBLIC_URL 可以去掉。
正确链接示例:
将导入更改为:
就这些了,希望对你有帮助...