Question

我是新来的反应者，但路由器出现问题。我已经尝试了几种解决方案，但没有解决任何问题。我想知道我的文件路由器或webpack-config是否做错了什么，如果有人可以帮助我，我将非常感激。

错误：

我相信，如果我解决了第一个错误，其余的将自行纠正。由于我是新来的反应者，所以我不确定。这是我的代码。

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无关。错误来自于您的组件之一的反应（读取错误）。

错误是说history属性是必需的，但是您给它未定义的内容，因此，您的createHistory()函数是一个罪魁祸首。

反应docs实际上是说要使用createBrowserHistory()，然后仅使用Router componepent ，显然， 不使用 。出于某些不可思议的原因，您已将BrowserRouter导入为Router，但是BrowserRouter不需要历史记录。建议仅使用低级路由器手动设置历史记录，仅与状态管理器同步历史记录，我看不到您正在这样做。在我的项目中，我一直使用<BrowserRouter>组件来处理历史记录。

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

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

1 个答案: