React Router Dom v6 Navigate报错及登录路由拦截实现问题

在React Router v6中，Route组件的语法和旧版本有本质区别，你遇到的错误是因为直接在Route标签内部放置条件渲染内容，而非通过element属性指定组件。v6要求所有路由的渲染内容必须通过element属性传递，同时原Redirect组件已被Navigate替代，但需遵循新的使用规则。

修正后的代码 #

import React from 'react';
import {BrowserRouter as Router, Route, Routes, Navigate} from 'react-router-dom'

import MasterLayout from './layouts/admin/MasterLayout';
import Home from './components/frontend/Home'
import Dashboard from './components/admin/Dashboard';
import Profile from './components/admin/Profile';
import Login from './components/frontend/auth/Login';
import Register from './components/frontend/auth/Register';
import axios from 'axios';

axios.defaults.baseURL = "http://localhost:8000";
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.headers.post['Accept'] = 'application/json';

axios.defaults.withCredentials = true;
axios.interceptors.request.use(function (config){
  const token = localStorage.getItem('auth_token');
  config.headers.Authorization = token ? `Bearer ${token}` : '';
  return config;
});

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          {/* v6中无需exact，Routes会自动精确匹配路径 */}
          <Route path="/" element={<Home/>} />

          {/* 将登录/注册的条件逻辑移入element属性 */}
          <Route 
            path="/login" 
            element={
              localStorage.getItem('auth_token') ? <Navigate to='/' replace /> : <Login />
            } 
          />
          <Route 
            path="/register" 
            element={
              localStorage.getItem('auth_token') ? <Navigate to='/' replace /> : <Register />
            } 
          />

          <Route path="/admin/*" element={<MasterLayout />}> 
            <Route path="dashboard" element={<Dashboard />} />
            <Route path="profile" element={<Profile />} />
          </Route>
        </Routes>
      </Router>
    </div>
  );
}

export default App;

关键修改说明 #

• 所有路由的渲染内容必须通过element属性传递，不能直接写在Route标签内部
• 给Navigate添加replace属性（推荐），替换当前路由记录，避免用户点击后退回到登录页
• 移除exact属性，React Router v6的Routes组件会自动处理精确路径匹配

内容的提问来源于stack exchange，提问作者Roy Bandi