无法使用带有参数的GET方法命中URL

时间:2017-11-15 05:36:50

标签: reactjs

我使用了react-router-dom和webpack以及weppack-dev-server进行开发。我的项目正在运行,但是当我在浏览器中用paramameters直接点击url然后它给了我 GET http://localhost:8080/archives/index.js net :: ERR_ABORTED 否则我点击链接组件的同一网址然后它正在运行

//main.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, hashHistory} from 'react-router-dom';
import Archives from './modules/Archives';
import Layout from './modules/Layout';
import Featured from './modules/Featured';
import Settings from './modules/Settings';
import Home from './modules/Home';
console.log('hi');

ReactDOM.render((
    <Router history={hashHistory}>
        <div>
        <Layout/>
        <Route exact path={'/'} component={Home}/>
        <Route path={'/featured'} component={Featured}/>
        <Route path={'/archives/:id'} component={Archives}/>
        <Route exact path={'/archives'} component={Archives}/>
        <Route path={'/settings'} component={Settings}/>
        </div>
    </Router>
    ),document.getElementById('app'));
///////////////////////////////////////////////////////////////////////////

//Layout.js
import React from 'react';
import { Link } from 'react-router-dom';
import '../css/main.css';
const bstyle = {
    color:'white',
    background: 333333,
    margin: '-9px',
};
export default class Layout extends React.Component{

  render() {
    return(
      <div>
      <h1>React Application</h1>
      <ul>
          <li><Link className='linktext' to='/'>Home</Link></li>
          <li><Link className='linktext' to='/archives'>Archives</Link></li>
          <li><Link className='linktext' to='/featured'>Featured</Link></li>
          <li><Link className='linktext' to='/settings'>Settings</Link></li>
      </ul>
      {this.props.children}
      </div>
    )
  }
}

0 个答案:

没有答案