反应路由给空白屏幕不正确的输出答案

【问题标题】：react routing gives the blank screen not proper output反应路由给空白屏幕不正确的输出
【发布时间】：2022-01-14 01:25:28
【问题描述】：

我尝试从 App.js 文件中调用我的路由，但这不能正常工作。我尝试了很多次，但浏览器出现空白屏幕。对 react 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;

【问题讨论】：

标签： reactjs react-hooks react-router

【解决方案1】：

你应该删除<Routes>

在 React Router 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;

【讨论】：

【解决方案2】：

试试这个代码 sn-p。

使用 Switch 语句更改路由。

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;

【讨论】：