reactjs - React 路由器抛出警告 : Location "/" did not match any routes

Question

我正在尝试创建一个实际上不执行任何操作的简单应用程序。我在使用 React Router 时遇到了困难。

我使用的react router版本是1.0

我不断收到一条错误消息

警告:位置“/”与任何路线都不匹配

下面是我的代码

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} .