>

루트 경로가있는 앱 구성 요소 :

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

    공유기 대신 Link 및 BrowserRouter 대신 NavLink 태그를 사용하여 "react-router-dom"에서 가져 오십시오

  • 답변 # 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>
    
    

    작동하지 않으면 브라우저 캐싱이나 다른 문제가있을 수 있습니다

관련 자료

  • 이전 javascript - 새로 고친 후에 만 ​​작동하는 JS 또는 JQ의 동적으로로드 된 스크립트
  • 다음 php - 파일 및 폴더 이름 바꾸기 오류