反应路由错误

Question

我的页面未根据指定的路由进行路由。我的文件是这样的。目前我的Home.js和Main.js效果很好。但是当我尝试路由到playerOne时，没有任何反应。即。该页面保持不变，没有任何改变。

我是完全陌生的反应，我正在努力学习。我不确定我犯错的地方。有人可以帮帮我吗？？提前致谢。

Routes.js

var React = require('react'); 
var ReactRouter = require('react-router'); 
var Router = ReactRouter.Router; 
var Route = ReactRouter.Route; 
var hashHistory = ReactRouter.hashHistory; 
var IndexRoute = ReactRouter.IndexRoute; 
var Main = require('../components/Main'); 
var Home = require("../components/Home"); 
var PromptContainer = require('../containers/PromptContainer'); 

var routes = (
    <Router history={hashHistory}> 
    <Route path='/' component={Main}> 
     <IndexRoute component={Home} /> 
     <Route path='playerOne' component={PromptContainer} /> 
     <Route path='playerTwo/:playerOne' component={PromptContainer} /> 
    </Route> 
    </Router> 
); 

module.exports = routes; 

PrompContainer.js

var React= require('react'); 

var PromptContainer= React.createClass({ 
    render: function(){ 
     console.log(this); 
     return(
     <div className="jumbotron col-sm-6 col-sm-offset-3 text-center"> 
      <h1>Some Text</h1> 
      <div className="col-sm-12"> 
       <form> 
        <div className="form-group"> 
        <input 
         type="text" 
         placeholder="Username" 
         className="form-control" 
        /> 
        </div> 
        <div className="form-group col-sm-4 col-sm-offset-4"> 
        <button 
         className="btn btn-block btn-success" 
         type="submit"> 
          Continue 
        </button> 
        </div> 
       </form> 
      </div> 
     </div> 
     ) 
    } 
}); 

module.exports= PromptContainer; 

Main.js

var React=require('react'); 

var Main=React.createClass({ 
    render:function(){ 
     return(
      <div className="main-container"> 
       {this.props.children} 
      </div> 
     ) 
    } 
}); 

module.exports= Main; 

Home.js

var React=require('react'); 

var Home=React.createClass({ 
    render:function(){ 
     return(
      <div> 
       Hello From Home!!! 
      </div> 
     ) 
    } 
}); 

module.exports= Home; 

index.js

var React=require('react'); 
var ReactDOM=require('react-dom'); 
var routes=require('./config/routes'); 

ReactDOM.render(
    routes, 
    document.getElementById("app") 
); 

我的切入点是index.js文件。 我的目录结构就像是这个 -

>app 
    >components 
     Home.js 
     Main.js 
    >config 
     routes.js 
    >containers 
     PromptContainer.js 
    index.js 
    index.html 
    >dist 
    >node_modules 
    package.json 
    webpack.config.js 

我的package.json文件中的一些事情是 -

{ 
    "name": "react", 
    "version": "1.0.0", 
    "description": "Learning React", 
    "main": "index.js", 
    "scripts": { 
     "test": "ava 'app/**/*.test.js' --verbose --require ./other/setup-ava-tests.js", 
     "production": "webpack -p", 
     "start": "webpack-dev-server" 
    }, 
    "dependencies": { 
     "jquery": "^3.0.0", 
     "npm": "^3.9.6", 
     "react": "^15.1.0", 
     "react-dom": "^15.1.0", 
     "react-router": "^2.4.1", 
     "webpack": "^1.13.1" 
    }, 
    "devDependencies": { 
     "babel-core": "^6.9.1", 
     "babel-loader": "^6.2.4", 
     "babel-preset-react": "^6.5.0", 
     "coffee-loader": "^0.7.2", 
     "html-webpack-plugin": "^2.21.0", 
     "webpack": "^1.13.1", 
     "webpack-dev-server": "^1.14.1" 
    }, 
    "author": "", 
    "license": "ISC" 
} 

我的WebPack配置是

var HtmlWebpackPlugin = require('html-webpack-plugin') 
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ 
    template: __dirname + "/app/index.html", 
    filename: "index.html", 
    inject: "body" 
}); 

module.exports = { 

    entry: [ 
     './app/index.js' 
    ], 

    module: { 
     loaders: [{ 
      test: /\.js$/, 
      exclude: /node_modules/, 
      loader: "babel-loader" 
     }] 
    }, 

    output: { 
     filename: "bundle.js", 
     path: __dirname + "/dist" 
    }, 

    plugins: [HtmlWebpackPluginConfig] 

}; 

Answer 1

您不能路由到PromptContainer因为您没有指定要路由到指定组件的链接。在您的Main.js指定链接到一个特定的路线为

var React=require('react'); 
var ReactRouter = require('react-router'); 
var Link = ReactRouter.Link; 
var Main=React.createClass({ 
    render:function(){ 
     return(
      <div> 
      <li><Link to="playerOne">Click to PlayerOne</Link></li> 
      <li><Link to="/">Click to Home</Link></li> 
      <div className="main-container"> 
       {this.props.children} 
      </div> 
      </div> 
     ) 
    } 
}); 

module.exports= Main; 

我希望这个作品。

您可以检查你的路由是通过访问你运行你的代码，我不得不通过包括presets

的WebPack做出改变的webpack.config.js链接

http://localhost:8080/#/playerOne

还在努力。配置。js

var HtmlWebpackPlugin = require('html-webpack-plugin') 
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ 
    template: __dirname + "/index.html", 
    filename: "index.html", 
    inject: "body" 
}); 

module.exports = { 

    entry: [ 
     './index.js' 
    ], 

    module: { 
     loaders: [{ 
      test: /\.js$/, 
      exclude: /node_modules/, 
      loader: "babel-loader", 
      query: { 
       presets: ['react'] 
      } 
     }] 
    }, 

    output: { 
     filename: "bundle.js", 
     path: __dirname + "/dist" 
    }, 

    plugins: [HtmlWebpackPluginConfig] 

}; 

我希望这个解决方案能够满足您的需求。