嵌套反应路由器不更新布局

Question

App component with Root routes:

import React, { Component } from 'react';
import './App.css';
import Routes from './routes';

class App extends Component {

    render() {
        return (
            <Routes/>
        );
    }
}

export default App;

Root routes:

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;

Nested component with nested 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;

Nested routes:

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;

So the problem is that when I click the Link ex.( /dashboard/notifications ) it changes the url in the browser but doesn't update the layout but when I refresh the page it works fine and the proper components are visible. The / route and dashboard works fine.

Answer 1

I may be a little late, but passing the location to the switch solved my issue.

import {
  BrowserRouter as Router,
  Switch,
  Route,
  useLocation
} from "react-router-dom";

let location = useLocation();

and inside the render:

<Router>
  <Switch location={location}>
    <Route path="/dashboard/home" component={Home} />
    <Route path="/dashboard/profile" component={Profile} />
  </Switch>
</Router>

Answer 2

尝试使用 NavLink 标签代替 Link 和 BrowserRouter 代替 Router ，从“react-router-dom”导入

Answer 3

use this method of link syntax

 <Link to='/dashboard/notifications'>
                    <i class="icon blue fa fa-2x fa-bell mr-3 float-right"></i>
                </Link>

instead of this

 <Link to={{ pathname: `/dashboard/notifications` }}>
                        <i class="icon blue fa fa-2x fa-bell mr-3 float-right"></i>
                    </Link>

if it dosn't work it may something with your browser caching or some other problems