反应路由错误

Question

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

我对反应完全陌生，正在努力学习。我不确定我在哪里犯了错误。有人可以帮帮我吗？？提前致谢。

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，因为您没有指定 link 路由到指定的组件。在您的 Main.js 中将 Link 指定为特定路线

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;

我希望这能奏效。

您可以通过访问 link

检查您的路由是否正常工作

http://localhost:8080/#/playerOne

另外，在您运行您的代码中，我必须通过包含 presets

来更改 webpack.config.js

webpack.config.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]

};

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

反应路由错误

React Routing Error

javascript

reactjs

webpack

react-router

react-dom