我正在尝试在我的反应应用程序中使用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 = (
<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>
您可以使用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>
<Switch>
<Route exact path="/login" name="Login Page" component={Login} />
<Route path="/" name="Home" component={DefaultComponent} />
</Switch>
</DebugRouter>
);
}
}
你可以尝试这样的事情
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)
并将此组件插入要调试的任何位置。你可以传递带有一些标识符的道具,我希望这对你有所帮助
您可以使用以下代码来调试React Router:
console.log(this.props.location)
console.log(this.props.match)