ReactJS 부트스트랩네바 및 라우팅이 함께 동작하지 않음
ReactJs를 사용하여 간단한 웹 앱을 만들려고 하는데NavbarReact-Bootstrap에 의해 제공됩니다.
작성했습니다.Navigation.js클래스를 포함하는 파일Navigation을 분리하다Navbar및 에서의 라우팅App.js파일입니다. 하지만 두 부분 모두 작동하지 않는 것 같습니다.페이지를 로드하면 비어있을 뿐이고, Navbar는 없습니다.실수를 발견할 수 있는 사람이 있나요?
내비게이션js:
import React, { Component } from 'react';
import { Navbar, Nav, Form, FormControl, Button, NavItem } from 'react-bootstrap';
import { Switch, Route } from 'react-router-dom';
import { Home } from './Page';
class Navigation extends Component {
render() {
return (
<div>
<div>
<Navbar>
<Navbar.Brand href="/">React-Bootstrap</Navbar.Brand>
<Navbar.Collapse>
<Nav className="mr-auto">
<NavItem eventkey={1} href="/">
<Nav.Link href="/">Home</Nav.Link>
</NavItem>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-success">Search</Button>
</Form>
</Navbar.Collapse>
</Navbar>
</div>
<div>
<Switch>
<Route exact path='/' component={Home} />
<Route render={function () {
return <p>Not found</p>
}} />
</Switch>
</div>
</div>
);
}
}
export default Navigation;
App.js:
import React, { Component } from 'react';
import Navigation from './components/routing/Navigation';
class App extends Component {
render() {
return (
<div id="App">
<Navigation />
</div>
);
}
}
export default App;
를 사용해 보았습니다.NavItem포함LinkContainer부터react-router-bootstrap이미 같은 결과가 나왔습니다.
완전성을 위해 Page.js:
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
export const Page = ({ title }) => (
<div className="App">
<div className="App-header">
<h2>{title}</h2>
</div>
<p className="App-intro">
This is the {title} page.
</p>
<p>
<Link to="/">Home</Link>
</p>
<p>
<Link to="/about">About</Link>
</p>
<p>
<Link to="/settings">Settings</Link>
</p>
</div>
);
export const About = (props) => (
<Page title="About"/>
);
export const Settings = (props) => (
<Page title="Settings"/>
);
export const Home = (props) => (
<Page title="Home"/>
);
우선, 스니펫에서는 코드를 압축하지 않은 것 같습니다.Router그래서 안에서 하고 있는지 확인해야 합니다.App또는 인ReactDOM.render:
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
rootElement
);
다음으로 리액트 부트스트랩을 렌더링하고 있는 것이 특정 문제입니다.Nav.Link반응 반응 반응 대신Link라우터가 루트 변경을 수신하지 않도록 합니다.다행히 react-bootstrap은 대부분의 컴포넌트에 렌더 프로포트를 제공하여 기본값을 사용하지 않을 경우 렌더링할 컴포넌트 또는 요소를 지정합니다.다음과 같이 전환합니다.
import { Switch, Route, Link } from 'react-router-dom';
class Navigation extends Component {
render() {
return (
<div>
<div>
<Navbar>
<Navbar.Brand as={Link} to="/" >React-Bootstrap</Navbar.Brand>
<Navbar.Collapse>
<Nav className="mr-auto">
<NavItem eventkey={1} href="/">
<Nav.Link as={Link} to="/" >Home</Nav.Link>
</NavItem>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-success">Search</Button>
</Form>
</Navbar.Collapse>
</Navbar>
</div>
<div>
<Switch>
<Route exact path='/' component={Home} />
<Route render={function () {
return <p>Not found</p>
}} />
</Switch>
</div>
</div>
);
}
}
스타일링에 문제가 있는 분들을 위해Link에서 구성 요소react-router-domreact-bootstrap 네비게이션바에서 단순히className="nav-link", 다음과 같이 합니다.
<Link to="/" className="nav-link">Home</Link>
대신
<Nav.Link href="/">Home</Nav.Link>
이 문제를 해결하려는 다른 사람들을 돕는 데 늦지 않았으면 좋겠어요.
as={Link} 대신 NavLink를 사용할 수 있습니다.링크와 같은 동작으로 렌더링되지만 실제로 액티브한 링크를 정의하기 위해 라우터의 URL을 "감시"합니다.
<Nav defaultActiveKey="/bills" as="ul">
<Nav.Item as="li">
<Nav.Link as={NavLink} to="/bills">Dividas</Nav.Link>
</Nav.Item>
<Nav.Item as="li">
<Nav.Link as={NavLink} to="/other">Em construção</Nav.Link>
</Nav.Item>
</Nav>
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
및 Navbar.js:
import React from 'react';
import {Container,Navbar,Nav,NavItem } from 'react-bootstrap';
import {Link} from 'react-router-dom';
<Nav className="ml-auto">
<NavItem> <Link className="nav-link" to="/">Home</Link> </NavItem>
<NavItem> <Link className="nav-link" to="/about">About</Link> </NavItem>
<NavItem> <Link className="nav-link" to="/contact">Contact</Link> </NavItem>
</Nav>
이것으로, 다음의 문제가 해결되었습니다.<Link>바깥에<Router>에러입니다.
사소한 크기의 프로젝트와 이미 의존관계로서 jQuery를 가지고 있는 프로젝트와 함께 발견되었기 때문에, 나는 리액트 라우터 / 리액트 부트스트랩 불일치를 이벤트 리스너와 정상적으로 해결할 수 있었다.document.
이것은 현재 마크업을 변경할 필요가 없다는 점에서 다른 솔루션보다 한 가지 장점이 있습니다.단, 다음 명령어를 보호하기 위해 몇 가지 추가 논리를 작성해야 할 수 있습니다.history.push필요에 따라 전화하다또, 이 기능을 확장해, 데이터 보호의 필요성도 있습니다.targetAtribute(아트리뷰트target="_blank".
jQuery가 바람직하지 않은 경우 vanilla JS 구현을 다음과 같이 작성할 수 있습니다.document.addEventListener더 이상 노력하지 않아도 돼.
// react-router@5
// usage of history may vary depending on version
import { Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
// IIFE scoping jQuery for us
(($) => {
// Wait for document ready
$(() => {
$(document).on('click', '[href]', (event) => {
// Only target links targeting our application's origin
if (event.currentTarget.href.indexOf(window.location.origin) === 0) {
// Prevent standard browser navigation
event.preventDefault();
const path = event.currentTarget.href.slice(window.location.origin.length);
history.push(path);
}
});
});
})(jQuery);
const Routing = (props) => (
<Router history={ history }>
...
</Router>
);
현재 react v18과 react-router v6.4에서는 접근 방식이 조금 다릅니다.
링크의 리액트루트 사용과 함께 올바르게 동작하도록 하기 위해서Nav.Link
또한 탭을 강조 표시하려면 설명서에 설명된 대로 eventKey를 사용해야 합니다.EventKey는 부모 Nav의 활성 상태를 확인하고 제어하기 위해 사용됩니다.
여기 예가 있습니다.
는 또한 '아까보다'에도 을 준다는 하시기 바랍니다.Navbar.Brand★★★★★★ 。
import { Link, useLocation } from 'react-router-dom';
const AppNavbar = () => {
const location = useLocation();
const activeKey = location.pathname === '/' ? '/projects' : location.pathname;
return (
<Navbar expand="lg" className="theme-navbar">
<Container>
<Navbar.Brand as={Link} to="/">
My Projects
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav activeKey={activeKey} className="me-auto">
<Nav.Link as={Link} eventKey="/projects" to="/projects">
Projects
</Nav.Link>
<Nav.Link as={Link} eventKey="/work" to="/work">
Ongoing Tasks
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
};
부트스트랩 css를 포함하지 않은 것 같습니다.다음 문서의 스타일시트 섹션을 참조해 주세요.
https://react-bootstrap.github.io/getting-started/introduction/
또는 index.display에 다음 항목을 추가합니다.
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous"
/>
언급URL : https://stackoverflow.com/questions/54843302/reactjs-bootstrap-navbar-and-routing-not-working-together
'programing' 카테고리의 다른 글
| 레퍼러를 설정하지 못했습니다.정책 오류 (0) | 2023.02.25 |
|---|---|
| javascript에서 Java Servlet 호출 (0) | 2023.02.25 |
| Angular - ng-repeat 순서를 만들 수 없습니다.작업별 (0) | 2023.02.25 |
| AngularJS를 사용하여 url 인코딩 앵커링크를 생성하는 방법 (0) | 2023.02.25 |
| Spring Batch에서 ItemReader에서 작업 매개변수에 액세스하는 방법은 무엇입니까? (0) | 2023.02.25 |