Question

这是代码：

import React,{propTypes} from 'react';
import { BrowserRouter as Router , Route, Link,Switch  } from 'react- 
router-dom'
import {ReportList} from './reportList'
import {NewReportForm} from './newReportForm'


export function App(){
var instance = Object.create(React.Component.prototype)


instance.render = function(){
    return (  <Router >                  
              <Switch>
              <Route  path="/get"  component={ReportList}  />
              <Route  path="/add"  component={NewReportForm}  />
              </Switch>
              </Router>
           )
}
return instance

}

路由器与任何/ get或/ add都不匹配，并且组件未加载。但是当我这样做时 - ＆gt;

 <Router >                  
              <Switch>
              <Route  path="/"  component={ReportList}  />
              <Route  path="/add"  component={NewReportForm}  />
              </Switch>
              </Router>

然后组件加载 ReportList 。发生了什么，我做错了什么？我怎样才能让它适用于route / get和/ add。我想为每条路线加载单独的组件。

package.json - ＆gt;

  "dependencies": {
    "jszip": "^3.1.5",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-router-dom": "^4.2.2",
    "request": "^2.85.0",
    "webpack": "^4.2.0",
    "xlsx-populate": "^1.14.0"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.26.0",
    "webpack-cli": "^2.0.14"
  },
  "babel": {
    "presets": [
      "es2015",
      "react",
      "stage-0"
    ],
    "plugins": [
      "transform-object-rest-spread"
    ]
  }

Webpack - ＆gt;

    var webpack = require('webpack');
var path = require('path');

var parentDir = path.join(__dirname, './');

module.exports = {
    node: {
        console: false,
        fs: 'empty',
        net: 'empty',
        tls: 'empty'
    },
    entry: [
        path.join(parentDir, 'index.js')
    ],
    module: {
        rules: [{
            test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },{
                test: /\.less$/,
                loaders: ["style-loader", "css-loder", "less-loader"]
            }
        ]
    },
    output: {
        path: parentDir + '/dist',
        filename: 'bundle.js'
    }
}

Answer 1

<Route  path="/"  component={ReportList}  />
<Route  path="/add"  component={NewReportForm}  />

在反应路由器中，这需要

<Route exact path="/"  component={ReportList}  />
<Route path="/add"  component={NewReportForm}  />

因为现在路径/任何东西都会与“/”匹配，因此渲染第一条路线中的内容。

React Router与其他路由不匹配，除了＆＃39; /＆＃39;

1 个答案: