Question

我正在尝试创建一个真正无法执行任何操作的简单应用程序。我正在用反应路由器立即解决困难。

我使用的反应路由器的版本是1.0

我一直收到错误消息

警告：位置＆＃34; /＆＃34;与任何路线都不匹配

以下是我的代码

Main.js

import React from "react";
import ReactDOM from "react-dom";
import { IndexRoute, Router, Route, Link } from 'react-router'
import createHistory from 'history/lib/createBrowserHistory';
import Template from './modules/template'
import Index from './modules/index'
import NotFound from './modules/notfound'

let history = new createHistory();

var routes = (
    <Router history={history}>
        <Route path="/" component={Template}>
            <IndexRoute component={Index}/>
            <Route path="*" component={NotFound}/>
        </Route>
    </Router>
);

ReactDOM.render(routes, document.getElementById('glass-app'));

Index.js

import React from "react";
import RouteHandler from 'react-router';

 export default class Index extends React.Component{
  render(){
    return <div>Hello World!</div>
 }
}

Template.js

import React from "react";
import RouteHandler from 'react-router';

export default class Template extends React.Component{
 render(){
    return  <div>
                <div>My Header</div>
                <RouteHandler/>
            </div>
 }
}

NotFound.js

import React from "react";
import RouteHandler from 'react-router';

export default class NotFound extends React.Component{
  render(){
     return  <div>
        The Page You Were Looking For Can't Be Found
     </div>
  }
}

WebPack配置

var webpack = require('webpack');
module.exports = {
    entry : {
        javascript :  "./public/js/main.js",
        html : "./public/index.html"
    },
    output : {
        path : __dirname + '/dist',
        filename : 'bundle.js'
    },
    devtool: 'inline-source-map',
    devServer:{
        historyApiFallback: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    module : {
        loaders : [
            {test: /\.jsx?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/},
            {test : /\.html$/, exclude: /node_modules/, loader : 'file?name=[name].[ext]'}
        ]
    }
};

我已阅读了很多有类似建议但没有运气的帖子。任何帮助，将不胜感激。

Answer 1

我终于弄明白了。在上面列出的template.js文件中，我使用的是<RouteHandler/>。在react-router 1.0中，它被替换为{this.props.children}。

反应路由器投掷警告：位置＆＃34; /＆＃34;没有匹配任何路线

1 个答案: