Reaction JS路径未显示组件 [英] React js route is not showing the component

问题描述

当我在路由外调用组件时，它工作得很好，但在路由内它不工作。

App.js文件为：

import './App.css';
import Login from './Components/Login/Login';
import { BrowserRouter as Router, Switch, Route, Redirect } from "react-router-dom";
import Protected from './Components/Common/Protected';

function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Redirect exact from="/" to="/Login" >
            <Route exact path="/Login" > <Login /> </Route>
          </Redirect>
        </Switch>
      </Router>

    </div>
  );
}

导出默认应用；

这些是我的包：

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "ag-grid-community": "^26.0.0",
    "ag-grid-enterprise": "^26.0.1",
    "ag-grid-react": "^26.0.0",
    "material-table": "^1.69.3",
    "react": "^17.0.2",
    "react-bootstrap": "^1.6.1",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.1",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2",
    "xlsx": "^0.17.1"
  },

推荐答案

重定向需要位于交换机内部的最后。以下是呈现登录所需的内容：

return (
    <Switch>
      <Route exact path="/login">
        <Login />
      </Route>
      <Redirect to="/login" />
    </Switch>
  );

这篇关于Reaction JS路径未显示组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！