我正在尝试在我的反应应用程序中使用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 (); } }
链接到要点
您可以使用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 (); } }
链接到要点