反应路由使空白屏幕无法正确输出。

Question

我已经尝试从App.js文件中调用我的路由，但是这是不正常的。我试过很多次了，但是浏览器得到的是空白屏幕。我对js框架的反应是完全陌生的

App.js:

import React from 'react';
import { BrowserRouter, Route,Routes} from 'react-router-dom';
import Login from './Components/Login/Login';
function App() {
  return (
    <div className="App">
      
       <BrowserRouter>
          <Routes>
            <Route path="/" exact={true} component={Login}></Route>
            <Route path="/login" exact={true} component={Login}></Route>
          </Routes>
       </BrowserRouter>    
    </div>
  );
}
export default App;

登录组件：(Login.js)

import React from "react";

const Login = () => {
  return (
    <form>
      <h3>Sign In</h3>

      <div className="form-group">
        <label>Email address</label>
        <input
          type="email"
          className="form-control"
          placeholder="Enter email"
        />
      </div>
    </form>
  );
};
export default Login;

Answer 1

您应该删除<Routes>

在React路由器V5中，我们只有<BrowserRouter>和<Route>

或者您也可以在导入时这样做：BrowserRouter as Router

import React from "react";
import {
  BrowserRouter as Router,
  Switch
  Route,
} from "react-router-dom";
import Login from "./Login";

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

Answer 2

试试这个代码片段。

用开关语句更改路由。

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Login from "./Login";
function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={Login}></Route>
          <Route path="/login" exact={true} component={Login}></Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}
export default App;

Answer 3

经过一天的研究，我找到了解决方案，但在互联网上却无处可寻。在终端中键入以下命令: npm卸载you路由器-dom(如果是这样安装的话)或npm卸载you路由器-dom@6(如果是这样安装的话)。

然后通过键入npm安装see router-dom@5安装see router-dom@5，您就可以在浏览器中看到组件。