React项目实现登录后显示侧边栏且路由切换时侧边栏不消失问题

问题根因 #

1. 整个应用重复声明了<Router>实例，仅需要最外层App.js里声明一个即可，Dashboard内层的<Router>会导致路由上下文不连通，跳转逻辑异常
2. App.js里匹配/dashboard的路由加了exact修饰，访问/dashboard/xxx子路径时外层路由匹配失败，会直接卸载Dashboard组件，自然无法保留侧边栏
3. Dashboard里的子路由没有拼接父级路径前缀，路由规则匹配不到对应组件

调整步骤 #

1. 修改App.js

移除/dashboard路由的exact修饰，让所有/dashboard开头的路径都能命中Dashboard组件，保持侧边栏常驻：

import React from 'react';
import Login from './components/Login'
import Dashboard from './components/Dashboard';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'

function App() {
  return (
    <React.Fragment>
      <Router>
        <Switch>
          <Route path="/" exact render={ props => (<Login {...props} />)}></Route>
          {/* 移除exact，所有/dashboard开头的路径都匹配Dashboard组件 */}
          <Route path="/dashboard" render={ props => (<Dashboard {...props} />)}></Route>
        </Switch>
      </Router>
    </React.Fragment>
  );
}

export default App;

2. 修改Dashboard.jsx

删除内层重复的<Router>，动态拼接父级路由前缀，同时给用户信息请求加token头避免鉴权失败：

import React, { useState, useEffect} from 'react';
import Sidebar from '../template/Sidebar';
import {Switch, Route, useRouteMatch} from 'react-router-dom';
import axios from 'axios';
import {ApiUrl} from '../services/apirest'
import Administrar from './Productos/Administrar'

const SideAndNavbar = () => {
    // 动态获取父级路由前缀，避免写死路径
    const { path } = useRouteMatch();
    return (
        <React.Fragment>
            <Sidebar/>
            <Switch>
                <Route path={`${path}/productos/administrar`} exact render={ props => (<Administrar {...props} />)}></Route>
                {/* 可以在这里补充更多子路由，比如dashboard默认首页 */}
                <Route path={path} exact>
                    <div>欢迎进入管理后台</div>
                </Route>
            </Switch>
        </React.Fragment>
    )
}

const Relog = () => {
    return (
        <div>
            <h1>Relogeate pá</h1>
        </div>
    )
}

export default function Dashboard() {
    const [user, setUser] = useState(null)

    useEffect(() => {
        obtenerUsuario()
    }, [])

    const obtenerUsuario = async () => {
        let url = ApiUrl + "/usuario";
        // 请求携带token，避免后端鉴权失败
        await axios.get(url, {
            headers: {
                Authorization: `Bearer ${localStorage.getItem('token')}`
            }
        })
            .then(response => {
                setUser(response.data.user)
            }).catch(error => {
                console.log(error)
            })
    }

    return (
        (user ? <SideAndNavbar/>: <Relog/>)
    );
}

3. 侧边栏跳转注意事项

Sidebar组件里的导航跳转必须用react-router-dom提供的<Link>组件，不要用原生a标签，a标签会刷新整个页面导致侧边栏重新加载，示例写法：

import { Link } from 'react-router-dom'

// 侧边栏导航项写法
<Link to="/dashboard/productos/administrar">管理商品</Link>

内容的提问来源于stack exchange，提问作者Eduardo Reusche Sáenz