React 路由器不起作用（可能与 Babel 冲突）答案

【问题标题】：React router doesn't work (Maybe a conflict with Babel)React 路由器不起作用（可能与 Babel 冲突）
【发布时间】：2021-09-02 19:01:24
【问题描述】：

我尝试构建一个非常简单的 ReactJS 路由器，但是当我访问我的 localhost:8080/login URL 时它不起作用。

这是我的 App.js 文件：

import React from 'react';
import ReactDOM from 'react-dom';
import './styles/style.css';
import { Route, BrowserRouter, Switch } from "react-router-dom";
import Login from "./Pages/Landing/Login.js";

function App() {
    return (
        <BrowserRouter>
            <Switch>
                <Route path="/login" exact component={Login} />
            </Switch>
        </BrowserRouter>
    );
}

ReactDOM.render(<App />, document.getElementById('app'));

我认为这可能是因为我在我的项目中也使用了 Babel，因此它可能会产生冲突，但在我的 VS Code 终端甚至我的 devTools 控制台中都没有显示。

这是我的 package.json 文件的一部分：

"scripts": {
    "start": "webpack --mode=development",
    "build": "webpack --mode=production",
    "dev": "webpack-dev-server"
  },
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "@babel/preset-react": "^7.14.5",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.2.0",
    "style-loader": "^3.2.1",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.0.0"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.1"
  }

这是我的 index.html 文件：

<!DOCTYPE html>

<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
</head>

<body>
    <div id="app"></div>

    <script src="./bundle.js"></script>
</body>

</html>

我的浏览器返回“Cannot GET /login”，但没有任何控制台错误，而且我的路由器仅适用于“/”路径。

谁能帮我解决这个问题？

【问题讨论】：

您能否为path="/" 添加一个route，并在该路由的组件中添加来自react-router 的link 并链接到path="/login"？了解 react-router 是否安装在 "/" 路径上并允许您通过用户操作而不是深度链接进行链接会很有帮助。
Cannot GET /login -> 这看起来像是来自快递服务器的响应。您的 api 服务器正在运行什么端口，您的浏览器指向的 url 是什么？

标签： javascript reactjs babeljs

【解决方案1】：

你必须做import {BrowserRouter as Router,Switch,Link} from react-router-dom

  <Router>
<Switch>
<Route path="/login">
<Login/>
</Route> 
</Switch>
  </Router>

【讨论】：

【解决方案2】：

还创建一个名为“主页”的简单组件（这是可选的）。
如果最后还是不行，请尝试在没有 ReactDom 的情况下重新创建您的应用。
最后一件事，对于简单的项目，最好不要使用长文件夹路径。您可以将所有组件捆绑在同一个文件夹中。

import React from 'react';
import ReactDOM from 'react-dom';
import './styles/style.css';
import { Route, BrowserRouter, Switch, Link } from "react-router-dom";
import Login from "./Pages/Landing/Login.js";
import Home from "./Home"

function App() {
    return (
        <BrowserRouter>
          <div>
            <Switch>
                <Route exact path="/login"> <Login/> </Route>
                <Route exact path="/"> <Home/> </Route>
            </Switch>
            <Link to="/login"> Login Page </Link>
            <Link to="/"> Homepage </Link>
          </div>
        </BrowserRouter>
    );
}

ReactDOM.render(<App />, document.getElementById('app'));

【讨论】：