如何调试 React 路由器？

Question

我正在尝试在我的 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>

Answer 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

Answer 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>
  )
}

Answer 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)

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

Answer 4

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

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