代码之家 › 专栏 › 技术社区 › Boopathi kumar

React JS路由不工作

service-worker react-router reactjs

Boopathi kumar · 技术社区 · 6 年前

路由在开发服务器上工作,但在本地主机上的生产构建上不工作。

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

包裹json

{
  "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"
  }
}

它还显示未找到服务人员。

service worker.js not found

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

此外,请参阅我的软件包中的主页。Json

最后,我在localhost的xampp服务器上运行构建应用程序

如果我做错了什么,请告诉我

3 回复 | 直到 6 年前

Asif vora 6 年前

我不得不建议运行你的构建应用程序,你可以使用wamp/xamp服务器创建一个虚拟主机,例如:myapp。地方的

或

您可以使用

npm install -g serve
serve -s build

对于构建应用程序,请在静态服务器5000端口上运行构建应用程序。

serve -h

有关更多详细信息,您可以查看上面的命令。

Asif vora 6 年前

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;

Edward 6 年前

我想你必须把你的部件导入错误

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

试试这个,让我检查一下。

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

推荐文章

siddhant kumar · Can'读取未定义的属性(读取“path”)

2 年前

sdfsdf · useNavigate替换选项的作用是什么?

2 年前

Tanner Summers · react router 6渲染的子级问题

2 年前

Tesh Aych · react axios URL连接返回404未找到

2 年前

wahida cse · 如何在mongodb中只删除一个对象,而不是删除所有与筛选查询匹配的对象?

2 年前

Kevin Tanuwijaya · 如何使用参数来响应路由器dom链接

2 年前

Roy · 带有不同道具的react组件的多个实例无法正常工作

2 年前

Ahmed Haque · 通过出口上下文传递多个状态变量

2 年前

kiryl · 警告。/。缓存/根目录。js尝试导入错误:“BaseContext”未从“@gatsbyjs/reach router”导出(作为“BaseContext”导入)

2 年前

Ancross · 链接未路由到组件

2 年前