使用Okta-React时React Router路由匹配失败问题求助

问题根源分析 #

你的代码存在几个关键路由配置错误，导致React Router无法匹配根路径"/"：

1. 路由嵌套结构错误：HasAccessToRouter组件中SecureRoute未被包裹在Routes组件内，React Router v6要求所有路由必须定义在Routes中。
2. 根路由缺失匹配规则：App组件最外层Route未指定path属性，无法匹配任何路径。
3. OktaAuth实例创建时机错误：const oktaauth = new OktaAuth(config.oidc);提前执行，但config尚未从settings.json加载完成，导致配置无效。
4. LoginCallback组件使用错误：需传入组件实例而非组件本身，即element={<LoginCallback />}而非element={LoginCallback}。

修复后的完整代码 #

App.js #

import React,{ PureComponent } from "react";
import axios from "axios";
import { BrowserRouter as Router, Route, Routes, useNavigate } from "react-router-dom";
import { OktaAuth, toRelativeUrl } from '@okta/okta-auth-js';
import { Security, LoginCallback, SecureRoute } from "@okta/okta-react";
import { createStore } from "redux";
import { Provider } from "react-redux";
import { createBrowserHistory } from "history";
import Home from "./Home";
import { allReducers } from "./redux/reducers";
import Loader from "./views/Common/Loader";
const browserHistory = createBrowserHistory();
const store = createStore(
  allReducers,
  {},
  window.devToolsExtension && window.devToolsExtension()
);

const HasAccessToRouter = ({ data }) => {
  const navigate = useNavigate();
  // 延迟创建OktaAuth实例，确保配置已加载
  const oktaAuth = new OktaAuth(data.oidc);

  const restoreOriginalUri = async (_oktaAuth, originalUri) => {
    navigate(toRelativeUrl(originalUri || '/admini', window.location.origin));
  };

  return (
    <Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri} >
      <Routes>
        {/* 将SecureRoute放入Routes内部 */}
        <SecureRoute path="/" exact element={<Home data={data} />}/>
        <Route path="/implicit/callback" element={<LoginCallback />} />
      </Routes>
    </Security>
  );
};

class App extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      response: {},
    };
  }

  componentDidMount() {
    this.getSettingsFromFile();
  }

  getSettingsFromFile = async () => {
    try {
      const response = await axios.get(
        `${
          process.env.PUBLIC_URL
            ? process.env.PUBLIC_URL
            : `${window.location.origin}`
        }/settings.json`
      );
      localStorage.setItem("apiUrl", response.data.API_URL || "");
      this.setState({
        isLoading: false,
        response: response.data,
      });
    } catch (error) {
      this.setState({
        isLoading: false,
        response: {},
      });
    }
  };

  render() {
    const { response, isLoading } = this.state;
    if (isLoading) {
      return <Loader />;
    }

    return (
      <div>
        <Provider store={store}>
          <Router
            history={browserHistory}
            basename={process.env.PUBLIC_URL || "/admini"}>
            <Routes>
              {/* 为根路由指定path，匹配所有子路由 */}
              <Route path="/*" element={<HasAccessToRouter data={response} />} />
            </Routes>   
          </Router>
        </Provider>
      </div>
    );
  }
}

export default App;

Home.js（逻辑无需修改） #

import { useOktaAuth } from "@okta/okta-react";
import React, { useEffect, useState } from "react";
import DefaultLayout from "./containers/DefaultLayout/DefaultLayout";
import { Spin, Button } from "antd";
import { isEmpty } from "lodash";

const Home = (props) => {
  const { authState, oktaAuth } = useOktaAuth();
  const [userInfo, setUserInfo] = useState(null);

  useEffect(() => {
    if (!authState.isAuthenticated) {
      setUserInfo(null);
    } else {
      oktaAuth.getUser().then((info) => {
        setUserInfo(info);
      });
    }
  }, [authState, oktaAuth]);

  const login = async () => {
    oktaAuth.signInWithRedirect();
  };

  return (
    <div>
      {authState.isAuthenticated !== null && (
        <div>
          {authState.isAuthenticated && !isEmpty(userInfo) ? (
            <DefaultLayout {...props} />
          ) : (
            <div className="spinner">
              <Spin tip="Loading..." />
            </div>
          )}
          {!authState.isAuthenticated && (
            <div>
              <p>请登录以访问门户。</p>
              <Button id="login-button" type="primary" onClick={login}>
                登录
              </Button>
            </div>
          )}
        </div>
      )}
    </div>
  );
};

export default Home;

关键修改说明 #

1. 调整路由嵌套结构：将SecureRoute和回调路由统一放入Routes组件内，符合React Router v6规范。
2. 修正根路由匹配规则：外层Route设置path="/*"，确保所有子路由能被正确匹配。
3. 延迟OktaAuth实例创建：将实例创建移到HasAccessToRouter内部，确保data.oidc配置已加载完成。
4. 修复LoginCallback调用：改为传入组件实例<LoginCallback />，而非组件类。
5. 修正跳转基准路径：restoreOriginalUri中跳转基准与Router的basename保持一致，避免路径错误。

额外验证点 #

• 确认settings.json中oidc配置包含正确的clientId、issuer、redirectUri字段。
• 检查Okta控制台应用的跳转URI与代码中redirectUri一致（示例：http://localhost:3000/admini/implicit/callback）。

内容的提问来源于stack exchange，提问作者Ram Gaikwad