홈>
루트 경로가있는 앱 구성 요소 :
import React, { Component } from 'react';
import './App.css';
import Routes from './routes';
class App extends Component {
render() {
return (
<Routes/>
);
}
}
export default App;
루트 경로 :
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Login from './scenes/Login/Login';
import Dashboard from './scenes/Dashboard/Dashboard';
const Routes = () => (
<Router>
<Switch>
<Route exact path="/" component={Login} />
<Route path="/dashboard" component={Dashboard} />
</Switch>
</Router>
);
export default Routes;
중첩 된 경로가있는 필수 구성 요소 :
import React, { Component } from 'react';
import logo from '../../logo.png';
import './Dashboard.css';
import Routes from './routes';
import { Link, withRouter } from 'react-router-dom';
class Dashboard extends Component {
render() {
return (
<div className="App">
<div id="map" />
<div className='sidebar'>
<img src={logo} className="App-logo" alt="logo" />
<Link to={{ pathname: `/dashboard/profile` }}>
<i class="icon blue fa fa-2x fa-user mr-3 float-right"></i>
</Link>
<Link to={{ pathname: `/dashboard/notifications` }}>
<i class="icon blue fa fa-2x fa-bell mr-3 float-right"></i>
</Link>
<Link to={{ pathname: `/dashboard/home` }}>
<i class="icon blue fa fa-2x fa-home mr-3 float-right"></i>
</Link>
<Routes />
</div>
</div>
);
}
}
export default Dashboard;
예상 경로 :
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Notifications from './scenes/Notifications/Notifications';
import Home from './scenes/Home/Home';
import Profile from './scenes/Profile/Profile';
const Routes = () => (
<Router>
<Switch>
<Route path="/dashboard/home" component={Home} />
<Route path="/dashboard/profile" component={Profile} />
<Route path="/dashboard/notifications" component={Notifications} />
</Switch>
</Router>
);
export default Routes;
그래서 문제는 링크를 클릭하면 (예 :
/dashboard/notifications
)
) 브라우저의 URL을 변경하지만 레이아웃을 업데이트하지는 않지만 페이지를 새로 고치면 정상적으로 작동하고 적절한 구성 요소가 표시됩니다. 와이즈 비즈
경로와
/
잘 작동합니다.
dashboard
-
답변 # 1
-
답변 # 2
이 링크 구문 방법 사용
<Link to='/dashboard/notifications'> <i class="icon blue fa fa-2x fa-bell mr-3 float-right"></i> </Link>
대신
<Link to={{ pathname: `/dashboard/notifications` }}> <i class="icon blue fa fa-2x fa-bell mr-3 float-right"></i> </Link>
작동하지 않으면 브라우저 캐싱이나 다른 문제가있을 수 있습니다
관련 자료
- reactjs - 창 위치가 변경되면 반응 라우터 스위치가 작동하지 않는 이유는 무엇입니까?
- reactjs - React Native는 상태를 업데이트하지 않습니다
- reactjs - 반응 - 링크가 항상 예상대로 작동하지 않습니다
- macOS Big Sur로 업데이트 한 후 XAMPP가 작동하지 않음
- vue.js - Vue Router를 사용하여보기 내에 포함 된 라우터 링크를 클릭하면 라우터보기가 업데이트되지 않습니다
- reactjs - react - 새 쿼리로 가져 오기를 업데이트하는 방법
- javascript - 반응 라우터를 사용하는 동안 소품 보내기
- javascript - 체크 박스의 상태 지연 업데이트, React
- reactjs - React의 라우터 스위치
- swift - UITextView의 값이 사용자 입력으로 업데이트되지 않습니다
- php - 배열을 반복하면 예상대로 배열의 값이 업데이트되지 않습니다
- ASPNET Core의 TagHelper는 값을 업데이트하지 않습니다
- javascript - React useEffect는 함수 변수를 업데이트 할 수 없습니다
- sql server - 업데이트 쿼리는 아무것도 변경하지 않고 오류를 표시하지 않습니다
- Elasticsearch에서 스크립트 및 중첩 된 새 필드를 사용하여 쿼리로 업데이트하는 방법은 무엇입니까?
- reactjs - React Hooks를 사용하여 객체로 상태 업데이트
- reactjs - 매개 변수를 사용하여 라우터 경로를 잘못된 구성 요소에 반응
- python - 데이터 프레임에서 중첩 된 사전 값 업데이트
- reactjs - 반응 라우터 v5 privateroute는 로그인 및 페이지 새로 고침 후 로그인으로 이동합니다
- reactjs - React Router 6, useNavigate to get pathname
공유기 대신 Link 및 BrowserRouter 대신 NavLink 태그를 사용하여 "react-router-dom"에서 가져 오십시오