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

【问题标题】：Nested React Router doesn't update layout嵌套反应路由器不更新布局
【发布时间】：2019-04-16 20:55:41
【问题描述】：

带有根路由的应用组件：

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;

所以问题是，当我单击链接 ex.(/dashboard/notifications) 时，它会更改浏览器中的 url，但不会更新布局，但是当我刷新页面时，它工作正常并且正确的组件可见。 / 路由和 dashboard 工作正常。

【问题讨论】：

看看documentation中的withRouter函数@
不是只针对redux吗？我这里没有使用 redux。

标签： reactjs routes nested router

【解决方案1】：

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

【讨论】：

我已经编辑了我的回复，并尝试在 NavLik 中使用 to="/.." 更改路径名，这就是 react router v4 的工作原理
问题不可能是因为您引用了相同的无状态功能组件路由，请查看您的导入，您只使用了 2 个声明的组件之一！我认为这是您的问题，您在两个组件中导入相同的（第一个）
您能详细解释一下我应该怎么做吗？
当然，首先，要确定这是问题所在，在仪表板组件中，尝试将您的路由直接放在 switch 标签中，而不是从 Routes 标签中导入，（直接 pute包含dashbord组件内的树内部路由的Routes的内容）并告诉我它是否有效

【解决方案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>

如果它不起作用，则可能是您的浏览器缓存或其他一些问题

【讨论】：

【解决方案3】：

我可能有点晚了，但是将位置传递给交换机解决了我的问题。

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

let location = useLocation();

在渲染内部：

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

【讨论】：