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

React JS路由不工作

service-worker react-router reactjs

Boopathi kumar · 技术社区 · 7 年前

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

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 回复 | 直到 7 年前

Asif vora 7 年前

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

或

您可以使用

npm install -g serve
serve -s build

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

serve -h

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

Asif vora 7 年前

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 7 年前

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

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

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

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

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

6 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

6 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

6 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

6 月前

Luckkks · 过渡色工作不正常

6 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

6 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

6 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

6 月前

noblerare · Vite错误-未定义导出(SSR)

6 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

6 月前