React Router v4.2与Redux集成时路由导入外部文件失效问题求助

嘿，我来帮你搞定这两个让人头疼的路由问题，都是很容易踩的小坑，咱们一个个捋清楚：

问题1：根路由/放在首位时路由失效 #

你这里的核心问题是拼写错误！注意看你的代码里，根路由的属性写的是axact，但React Router里的精确匹配属性是exact（少了个e）！

为什么会失效呢？因为没有正确添加exact的话，根路由/会匹配所有以/开头的路径（所有路由都是以/开头的），当你把它放在<Switch>的最前面时，Switch会匹配到第一个符合条件的路由，直接渲染Home组件，后面的/blog、/users就永远不会被匹配到了。

而当你把/放在最后时，Switch会先检查前面的/blog、/users，匹配到就渲染对应的组件，没匹配到才会走到根路由，所以看起来正常，但这其实是侥幸，本质上还是exact的拼写错误导致的。

修正后的代码： #

<Switch>
  {/* 加正确的exact属性，现在放前面也能正常工作了 */}
  <Route path="/" component={Home} exact />
  <Route path="/blog" component={Blog} />
  <Route path="/users/" component={Users} />
</Switch>

问题2：抽离路由到外部组件后失效 #

这个问题有两个关键点：

1. React组件名必须大写开头：你在router.js里定义的组件是小写的router，但在App.js里用了<Router />来渲染。React会把小写开头的组件当成原生HTML标签处理，根本不会识别成你自定义的路由组件！
2. 同样存在axact的拼写错误，这个也要一起修正。

修正后的代码： #

router.js（组件名改为大写，修正exact拼写）：

import React, { Component } from 'react';
import { Switch, Route } from "react-router-dom";
import Home from './components/Home'
import Blog from './components/blog/Blog'
import Users from './components/users/Users'

// 组件名改为大写Router
class Router extends Component {
  render() {
    return (
      <div>
        <Switch>
          {/* 修正拼写为exact */}
          <Route path="/" component={Home} exact />
          <Route path="/blog" component={Blog} />
          <Route path="/users/" component={Users} />
        </Switch>
      </div>
    );
  }
}

export default Router;

App.js（确保导入的组件名正确）：

import React, { Component } from 'react';
import { getUsers } from './store/actions'
import { connect } from 'react-redux'
import { withRouter } from "react-router-dom";
import Nav from './components/navigation/Nav';
// 导入大写的Router组件
import Router from './router';
import axios from 'axios';

const userApi = "https://jsonplaceholder.typicode.com/users"

class App extends Component {
  componentWillMount() {
    axios.get(userApi)
      .then(response => {
        let users = response.data
        this.props.getUserList(users)
      })
      .catch(error => {
        console.log(error)
      })
  }

  render() {
    return (
      <div className="container">
        <Nav />
        {/* 这里的<Router />现在能正确识别了 */}
        <Router />
      </div>
    );
  }
}

const mapDispatchToProps = dispatch => ({
  getUserList: (api) => dispatch(getUsers(api))
})

export default withRouter(connect(null, mapDispatchToProps)(App));

另外补充一点：虽然你用了withRouter包裹App组件，但要确保你的整个应用在index.js里被<BrowserRouter>（或者其他路由容器，比如HashRouter）包裹着，比如：

import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

不过你直接把路由写在App里能正常工作，说明这一步你已经做对了，只是提一下以防万一~

内容的提问来源于stack exchange，提问作者Saeid Barzegar