如何调试 React 路由器？

Posted 2023-02-21

【中文标题】如何调试 React 路由器？

【英文标题】：How to debug React Router?

【发布时间】：2016-03-09 17:09:24

【问题描述】：

我正在尝试在我的 react 应用程序中使用 React Router，该应用程序绑定为 wordpress 插件并使用通量来获取 api 数据。

我的入口点如下所示

import React from 'react';
import Workshops  from './components/workshops';
import Workshop  from './components/workshop';
import NotFound  from './components/notfound';
import Router,  Route, DefaultRoute, NotFoundRoute, Redirect, Link  from 'react-router';
import json  from './config.json';
localStorage.clear();
localStorage.setItem('workshops', JSON.stringify(json));

const AppRoutes = (
   <Route path="/" handler=Workshops>
    <DefaultRoute handler=Workshop />
    <Route name="workshop" path=":slug" handler=Workshop/>
    <NotFoundRoute handler=NotFound />
  </Route>
);

Router.run(AppRoutes, Router.HashLocation, (Root) => 
  React.render(<Root />, document.getElementById('workshop-booker'));
);

在我的 Workshops 组件中，我创建了一些指向给定路由的链接，我更改了哈希值，但路由组件没有被触发。

<h3> <Link to="workshop" params=slug: workshop.slug > workshop.title.rendered </Link></h3>

【问题讨论】：

您要调试什么？

为什么被调用的路由没有被触发，在上面的示例中，我希望在哈希更改时，workop 组件会在 slug 上输出一个新视图

我也想调试它，但是服务器端带有ReactRouter.createMemoryHistory(pagePath)。顺便提一句。在版本 1 和 2 中，它应该是 component= 而不是 handler= — 这可能是您的问题吗？ （&name= 不见了）还有很多其他的东西也发生了变化

我找到了一个解决方案-> redux devtools

【参考方案1】：

您可以使用 DebugRouter 包装您的路由器，它将打印所做的导航操作：

import React,  Component  from 'react';
import  BrowserRouter, Route, Switch  from 'react-router-dom';
import Login from 'components/Login'
import DefaultComponent from 'components/DefaultComponent'

class DebugRouter extends BrowserRouter 
  constructor(props)
    super(props);
    console.log('initial history is: ', JSON.stringify(this.history, null,2))
    this.history.listen((location, action)=>
      console.log(
        `The current URL is $location.pathname$location.search$location.hash`
      )
      console.log(`The last navigation action was $action`, JSON.stringify(this.history, null,2));
    );
  


class App extends Component 
  render() 
    return (
      <DebugRouter>
        <Switch>
          <Route exact path="/login" name="Login Page" component=Login />
          <Route path="/" name="Home" component=DefaultComponent />
        </Switch>
      </DebugRouter>
    );
  

link to the gist

【讨论】：

该解决方案可能有效，但不幸的是，当我将 Switch 组件封装在 BrowserRouter 中时，我不再遇到重定向问题。编辑：我的问题是因为我的代码中有history.push，该方法显然消灭了history.push 命令。

【参考方案2】：

我为功能组件制作了我的 DebugRouter

const DebugRouter = ( children :  children: any ) => 
  const  location  = useHistory()
  if (process.env.NODE_ENV === 'development') 
    console.log(
      `Route: $location.pathname$location.search, State: $JSON.stringify(location.state)`,
    )
  

  return children


const Router = () => 
  return (
    <BrowserRouter>
      <Layout>
        <Route
          render=() => 
            return (
              <DebugRouter>
                <Switch>
                  <Redirect exact from="/" to=... />
                  // <Route/> should be here

                  <Redirect from="*" to=... />
                </Switch>
              </DebugRouter>
            )
          
        />
      </Layout>
    </BrowserRouter>
  )

【参考方案3】：

你可以试试这样的

import React, Component from 'react';
import PropTypes from 'prop-types'
import withRouter from "react-router-dom";

class RouterDebugger extends Component 
    componentWillUpdate(nextProps, nextState)
        console.log('componentWillUpdate',nextProps, nextState)
    
    componentDidUpdate(prevProps) 
        console.log('componentDidUpdate',prevProps)

    

    render() 
        return null
    


export default withRouter(RouterDebugger)

并将此组件插入到您要调试的任何位置。 您可以传递带有一些标识符的道具 希望对你有帮助

【参考方案4】：

您可以使用以下代码来调试 React Router：

console.log(this.props.location)
console.log(this.props.match)

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高​​答案的长期价值。

不清楚这应该去哪里，我只是把它放到应用程序的渲染方法中就出错了。不可否认的是打字稿，所以它更清楚地找到了undefined：Property 'location' does not exist on type 'Readonly<> & Readonly< children?: ReactNode; >'. TS2339