Witam Wszystkich
Sytuacja wygląda tak, korzystajac z wszelkiej maści poradników i tutoriali zrobilem Navbar w react bootstrap. Nigdy wcześniej jakoś specjalnie w nim nie pisalem, dlatego wiadomo - pomoc internetu niezbedna. Niby cos tam dziala, ale po klikniciu na jakąkolwiek opcje niestety, ale nie ładuje mi contentu. Muszę odświeżyc strone i dopiero wtedy otrzymuję zawartość. Dziala to tak samo mizernie pod każdym przyciskiem. Niżej podrzucam kod. Czy ktoś mogłby mi wyjaśnic dlaczego tak, a nie inaczej ten navbar się zachowuje? Dodam, że na wszelkich poradnikach działał normalnie, tylko u mnie coś nie chce działać. Mogę się mylić, ale to trochę działą tak, jakby react nie dostał zasobów na dzień dobry, przez co nie moze mi ich zaladować. Wtedy poprzez refresh otrzymuja stosowną zawartość.
Przerzuciłem chyba z pół internetu, filmów, poradników i mimo wszystko nie wiem gdzie jest bląd, jaki element poszedł nie tak. Będę wdzięczny za każdą pomoc.
Dodam, że np. Item jako klasę.
Pozdrawiam serdecznie!
import React, { Component } from 'react';
import { Navbar, Nav, NavDropdown, Form, FormControl, Button, Container } from 'react-bootstrap';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import Home from './Home';
import About from './About';
import Login from './Login';
import Article from './Article';
import MainView from './MainView';
import Item from './Item';
class NavbarComp extends Component{
render(){
return(
<Router>
<div>
<Navbar bg="dark" variant="dark" expand="lg">
<Container>
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link as={Link} to="/login">Login</Nav.Link>
<Nav.Link as={Link} to="/item">Item</Nav.Link>
<Nav.Link as={Link} to="/article">About</Nav.Link>
<NavDropdown title="Dropdown" id="basic-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">
Another action
</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">
Separated link
</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</div>
<div>
<Switch>
<Route path="/login" component={Login}/>
<Route path="/article" component={Article}/>
<Route path="/item" component={Item}/>
</Switch>
</div>
</Router>
);
}
}
export default NavbarComp;
{
"name": "xxx",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"bootstrap": "^5.2.0",
"react": "^18.2.0",
"react-bootstrap": "^2.5.0",
"react-dom": "^18.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}