Question

如何在我的自定义私有路由中访问 class HomeController: UITabBarController { let firstC = FirstController() let secondC = SecondController() let thirdC = ThirdControllerController() let fourthC = FourthController() let bottomNavBar: MDCBottomNavigationBar = { let bottomNavBar = MDCBottomNavigationBar() bottomNavBar.titleVisibility = .always bottomNavBar.alignment = .justifiedAdjacentTitles return bottomNavBar }() let firstItem: MDCTabBarItem = { let firstItem = MDCTabBarItem() firstItem.title = "Tab 1" firstItem.image = UIImage(systemName: "house.fill") firstItem.tag = 0 return firstItem }() let secondItem: MDCTabBarItem = { let secondItem = MDCTabBarItem() secondItem.title = "Tab 2" secondItem.image = UIImage(systemName: "house.fill") secondItem.tag = 1 return secondItem }() let thirdItem: MDCTabBarItem = { let thirdItem = MDCTabBarItem() thirdItem.title = "Tab 3" thirdItem.image = UIImage(systemName: "house.fill") thirdItem.tag = 2 return thirdItem }() let fourthItem: MDCTabBarItem = { let fourthItem = MDCTabBarItem() fourthItem.title = "Tab 4" fourthItem.image = UIImage(systemName: "house.fill") fourthItem.tag = 3 return fourthItem }() override func viewDidLoad() { super.viewDidLoad() bottomNavBar.delegate = self bottomNavBar.items = [firstItem, secondItem, thirdItem, fourthItem] self.viewControllers = [ firstC, secondC, thirdC, fourthC ] view.addSubview(bottomNavBar) } } // SecondC - inner controller class SecondController: UITabBarController { let firstC = TabFirstC() let secondC = TabSecondC() let firstTab: MDCTabBarItem = { let tab = MDCTabBarItem(title: "App", image: nil, tag: 0) return tab }() let secondTab: MDCTabBarItem = { let tab = MDCTabBarItem(title: "All", image: nil, tag: 1) return tab }() let tabs: MDCTabBarView = { let tabs = MDCTabBarView() tabs.translatesAutoresizingMaskIntoConstraints = false return tabs }() override func viewDidLoad() { super.viewDidLoad() view.addSubview(tabs) viewControllers = [firstC, secondC] tabs.tabBarDelegate = self tabs.items = [firstTab, secondTab] tabs.selectedItem = firstTab NSLayoutConstraint.activate([ tabs.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor), tabs.topAnchor.constraint(equalTo: logoImageView.safeAreaLayoutGuide.bottomAnchor, constant: 10), tabs.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor), ]) } }？编写私有路由是为了检查身份验证。现在我变得未定义。
代码：

useParams

App.tsx：

interface RegistrationToken {
  registration_token: string;
}

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { RootState } from '../redux/rootReducer';
import Loading from '../layout/Loading';

const PrivateRoute = ({ component: Component, ...rest }: any) => {
  const isAuthenticated: boolean = useSelector(
    (state: RootState) => state.user.isAuthenticated,
  );
  const isPending = useSelector((state: RootState) => state.user.isPending);
  const { registration_token } = useParams<RegistrationToken>();

  return (
    <Route
      {...rest}
      render={(props) => {
        if (!isAuthenticated && isPending) {
          return <Loading />;
        } else if (!isAuthenticated) {
          return <Redirect to="/signin" />;
        } else {
          return <Component {...props} />;
        }
      }}
    />
  );
};
export default PrivateRoute;

Answer 1

事实证明，为了访问，您应该将组件包装到 <Route> 中，否则，您无法使用 useParamas() 访问，因为在我的情况下它是未定义的。
但是有解决方案，使用 useLocation() 在我的私人路线中：

const location = useLocation();
const registration_token = getRegistrationTokenFromLocation(location.pathname);

哪里getRegistrationTokenFromLocation。 逻辑是解析路径并获得所需的值在我的例子中是 localhost:3000/:registration_token/sign-up:

export function getRegistrationTokenFromLocation(pathName: string) {
  const firstRange = pathName.indexOf('/');
  const secondRange = pathName.indexOf('/', firstRange + 1);
  return pathName.slice(firstRange + 1, secondRange);
}

React-Router 如何在自定义私有路由中访问 useParams

1 个答案: