React JS路由无法正常工作

时间:2018-04-18 22:35:33

标签: reactjs react-router service-worker

路由正在开发服务器上运行,但它不能在localhost上进行生产构建。



import React, { Component } from 'react'
import { Switch,BrowserRouter as Router,withRouter, Route, Link } from 'react-router-dom'
import Login from '../login'
import Home from '../Home'


class MyRouter extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path='/' exact component={Login} />
          <Route path='/Home' exact component={Home} />
        </Switch>
      </Router>
    )
  }
}

export default MyRouter
&#13;
&#13;
&#13;

的package.json

&#13;
&#13;
{
  "name": "tutorials",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",
  "dependencies": {
    "code-prettify": "^0.1.0",
    "react": "^16.3.0",
    "react-dom": "^16.3.0",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}
&#13;
&#13;
&#13;

并且还显示未找到服务工作者。

service worker.js not found

But I am having service worker.js next to index.html in the build folder

另外,请参阅我的package.Json

中的主页

最后,我在localhost

的xampp服务器上运行构建应用程序 如果我做错了,请告诉我

3 个答案:

答案 0 :(得分:1)

我必须建议运行你的构建应用程序你可以使用wamp / xamp服务器来实现maka虚拟主机:myapp.local

OR

您可以使用

npm install -g serve
serve -s build

对于构建应用程序并在Static sever 5000端口上运行构建应用程序。

serve -h 

有关详细信息,请查看以上命令。

答案 1 :(得分:0)

import React, { Component } from 'react';
import Home from './components/Home';
import Login from './components/Login';
import { BrowserRouter as HashRouter, Route, Switch } from 'react-router-dom';

class App extends Component {
    render() {
        return (
            <HashRouter >
                    <div className="container">
                        <Switch>
                            <Route exact path="/Home" component={Home} />
                            <Route exact path="/" component={Login} />
                        </Switch>
                    </div>
            </HashRouter>
        );
    }
}
export default App;

答案 2 :(得分:0)

我认为您必须错误导入组件

import Login from '../login' 
import Home from '../Home'

试试这个并让我检查。

import Login from './login' 
import Home from './Home'