React Router Redux，将LocationBeforeTransitions附加到API请求

Question

我目前正在开发rails / react / redux项目。 我最近添加了react-router-redux“^ 4.0.8”和react-router“^ 3.0.2”，现在当前的LocationBeforeTransitioning被附加到每个API请求URL（即应该是： http://localhost:3000/api/posts?term=“test” ，但是试图在posts组件中获取http://localhost:3000/categories/api/posts?term=“test” 。

该项目相当大，但我在下面列出了一些可能相关的片段：

routes.js

module.exports = (
  <Route path="/" component={App}>
    <IndexRedirect to="/categories"/>
    <Route path="/categories" component={Categories}/>
    <Route path="/:category" component={Posts}/>
    <Route path="/categories/posts" component={Posts}/>
    <Route path="/categories/:post" component={Citations}/>
    …
    <Route path="*" component={NotFound}/>
  </Route>
)

configureStore.js

export default function configureStore(initialState) {
  const composeEnhancers = composeWithDevTools({
  })
  const router = routerMiddleware(browserHistory);
  const store = createStore(
    rootReducer,
    initialState,
    composeEnhancers(
      applyMiddleware(thunk, router)
  ))
…

actions.js

…
export function fetchPosts (term = '', random = false) {
  return function(dispatch) {
    fetch(`${API_URL}posts?term=${term}&random=${random}`, {
      method: 'get',
      headers: !sessionStorage.jwt ? default_header : auth_header
    })
    .then(response => response.json())
    .then(json => {
      if (!json || json.error) {
        let default_error = 'An Error Occured.';
        throw `Oops! ${json.exception || default_error}`;
      }
      dispatch(requestPostSuccess(term, json));
    })
    .catch(error => {
      dispatch(requestPostError(error));
    });
  }
}
…

Posts.js

… 
class Posts extends Component {
  componentWillMount(){
    if (this.props.location.pathname.slice(1).split('/')[0] == 'categories'){
      this.props.actions.fetchPosts('', true)
    }
  }
… 

任何人都知道可能导致此问题的原因和/或解决方法？

Answer 1

您可以在fetchPosts函数中检查API_URL的值。