Router 的问题:浏览器中报 Cannot GET ***

来源:10-1 Router概念

yxnne

2017-12-18

//root.js====================================================================
//引入
import {
  BrowserRouter ,
  Route,
  Link,
  Switch
} from 'react-router-dom';

import Index from './index';
import ComponentBodyIndex from './component/body';

class Root extends React.Component{
  render(){
    return (
      <BrowserRouter>
        <Switch>
          <Route path="/" component={Index}/>
          <Route exact path="/test" component={ComponentBodyIndex}/>
        </Switch>
      </BrowserRouter>
    )
  }
}
//入口
ReactDOM.render(<Root/>,document.getElementById('example'));


// webpack.config.js===================================================================
const webpack = require('webpack');
const path = require('path');

module.exports = {
  context : __dirname + '/src',
  entry   : "./js/root.js",
  module  : {
    loaders   :[{
      test : /.js?$/,
      exclude:/(node_modules)/,
      loader: 'babel-loader',
      query :{
        presets:['react' , 'babel-preset-react']
      }
    }]
  },
  output:{
    path:__dirname + "/src/",
    filename:"bundle.js"
  },
  devServer:{
    //我们在这里对webpack-dev-server进行配置
    port:18080
  }
};

//package.json=======================================================
{
  "name": "react_integreate",
  "version": "1.0.0",
  "description": "",
  "main": "root.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "yxnne",
  "license": "ISC",
  "dependencies": {
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-mini-router": "^2.2.1",
    "react-router-dom": "^4.2.2",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1"
  }
}

学习到router这一节,也知道老师这里是基于react router 2 的 。我在使用react router 4 的时候 js所写上所示,但是服务开启之后,在浏览器中输入:http://localhost:18080/ (我的端口是18080) 是可以访问的,但是输入http://localhost:18080/test 的时候不是我想要的组件,而是“Cannot GET /test”,控制台和终端都没有报错。请问老师我是哪里出问题了?

写回答

1回答

Parry

2017-12-18

第二十章我又讲解了 react router 4 的用法并且有源码。

1
3
yxnne
回复
Parry
好的~谢谢老师~~
2017-12-19
共3条回复

结合基础与实战学习React.js 独立开发新闻头条平台

轻松入门 React 开发,React Router 4 与 Webpack 2 完美升级项目

2768 学习 · 2126 问题

查看课程