React - 失败的道具类型：道具“历史”在“路由器”中被标记为必需，但其值为“未定义”

Question

我是 React 新手，我遇到了路由器问题。我已经尝试了几种解决方案，但都没有成功。我想知道我的文件路由器或 webpack-config 是否有问题，如果有人可以帮助我，我将非常感激。

错误：

error-image

我相信如果我解决了第一个错误，其余的就会自行改正。由于我是新手，所以我不能确定。这是我的代码。

routes.jsx:

import React from 'react';
import { BrowserRouter as Router , Route, Switch } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory'

import LoginApp from './loginApp';
import RegisterApp from './registerApp';
import HomeApp from './homeApp';
import error from '../components/error';

const history = createHistory();

const Routes = () => (    
    <Router history={history}>        
        <Switch>
            <Route path='/' component={LoginApp} exact />    
            <Route path='/register' component={RegisterApp} />
            <Route path='/home' component={HomeApp} />  
            <Route component={error} />                                              
        </Switch>                               
    </Router>        
)         

export default Routes;

index.jsx:

import React from 'react';
import { render } from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import 'bootstrap/dist/css/bootstrap.css';

import Routes from './main/routes';

const App = (Routes) => {
    render(
        <AppContainer>
            <Routes />
        </AppContainer>,
        document.querySelector('[data-js="app"]')
    )
}

App(Routes)

if(module.hot){
    module.hot.accept('./main/routes', () => {
        const NextApp = require('./main/routes').default

        App(NextApp)
    })
}

webpack.config.js:

const path = require('path')
const webpack = require('webpack')

module.exports = {
    devtool: 'source-map',
    entry: [
        'react-hot-loader/patch',
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server',
        path.resolve(__dirname, 'src', 'js', 'index')        
    ],    
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/dist/'
    },
    resolve: {
        extensions: ['*', '.js', '.jsx'],
        alias: {
            modules: path.join(__dirname, 'node_modules')
        }
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),        
    ],
    devServer: {
        contentBase: './dist',
        hot: true,
        historyApiFallback: true
    },
    module: {        
        rules: [
            {
                enforce: "pre",
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                include: /src/,
                use:{
                    loader: 'standard-loader'
                } 
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },            
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                include: /src/,
                use:{
                    loader: 'babel-loader'
            } 
        }]
    }
}

server.js:

const webpack = require('webpack')
const WebpackDevServer = require('webpack-dev-server')
const config = require('./webpack.config')

new WebpackDevServer(webpack(config), {
    stats: { colors: true}
}).listen(3000, (err) => {
    if (err) {
        return console.log(err)
    }
    console.log("Listening on port 3000...")
})

Answer 1

好的，您的问题（乍一看）与服务器或 webpack 无关。错误来自反应，来自您的组件之一（阅读错误）。

错误是说历史属性是必需的，但你给它一些未定义的东西，所以，你的 createHistory() 函数是一个很好的罪魁祸首。

反应 docs 实际上说要使用 createBrowserHistory()，然后 仅与路由器组件 一起使用，要清楚，你没有使用。由于某些不敬虔的原因，您将 BrowserRouter 作为 Router 导入，但 BrowserRouter 不需要历史记录。仅建议使用低级路由器手动设置历史记录以与状态管理器同步历史记录，我看不到你在做什么。在我的项目中，我一直使用 <BrowserRouter> 组件来处理历史记录。

位置道具也有问题，但首先要让你的主路由器正常工作，我怀疑它会消失。

React - 失败的道具类型：道具“历史”在“路由器”中被标记为必需，但其值为“未定义”

React - Failed prop type: The prop `history` is marked as required in `Router`, but its value is `undefined`

reactjs

webpack

webpack-dev-server

react-router-v4

react-router-dom