当前位置:  开发笔记 > 前端 > 正文

如何调试React Router?

如何解决《如何调试ReactRouter?》经验,为你挑选了1个好方法。

我正在尝试在我的反应应用程序中使用React Router,该应用程序被限制为wordpress插件并使用flux来获取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 = (
   
    
    
    
  
);

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

比我的Workshops组件我做了一些给定路由的链接,我有哈希更改,但路由组件不会被解雇.

{workshop.title.rendered }

小智.. 15

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

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

class DebugRouter extends Router {
  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 (
      
        
          
          
        
      
    );
  }
}

链接到要点



1> 小智..:

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

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

class DebugRouter extends Router {
  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 (
      
        
          
          
        
      
    );
  }
}

链接到要点

推荐阅读
无名有名我无名_593
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有