Question

我通过react js路由器（react-router-dom v4.2）和 Redux 一起工作，并遇到了奇怪的变量问题

首先，我说我成功使用并运行了此功能，但存在问题

当我在路由列表路由器中将根路由用作第一条死机时！

但是当我使用'/'路线作为最后一条路线时，一切都很好

$stmt = $pdo->query("SELECT * FROM client_form cf
 INNER JOIN client_form_2 cf2 ON cf.client_id = cf2.client_id
 INNER JOIN client_form_3 cf3 ON cf.client_id = cf3.client_id
 INNER JOIN client_form_4 cf4 ON cf.client_id = cf4.client_id
 INNER JOIN client_form_5 cf5 ON cf.client_id = cf5.client_id
 INNER JOIN client_form_6 cf6 ON cf.client_id = cf6.client_id
 INNER JOIN client_form_7 cf7 ON cf.client_id = cf7.client_id
");

当我将路由创建为外部组件并将其导入到应用程序路由时不起作用

这是我的route.js代码

<Switch>
  <Route path="/blog" component={Blog} />
  <Route path="/users/" component={Users} />
  <Route path="/" component={Home} axact />
</Switch>

这是我的App.js代码：

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

class router extends Component {
    render() {
        return (
            <div>
                <Switch>
                    <Route path="/" component={Home} axact />
                    <Route path="/blog" component={Blog} />
                    <Route path="/users/" component={Users} />
                </Switch>
            </div>
        );
    }
}

export default router;

当我使用此代码时，一切都很好

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';
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 />
            </div>
        );
    }
}

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

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

从外部文件导入路由时，Rect Js路由器停止

0 个答案: