当我使用 Route 时，我的 Wep 页面不显示任何内容答案

【问题标题】：My Wep Page Show Nothing When i Use Route当我使用 Route 时，我的 Wep 页面不显示任何内容
【发布时间】：2022-01-09 14:52:56
【问题描述】：

嗨，伙计们，我想创建一个使用导航栏更改页面的网页，所以我想使用 bootstrap 和 react-route-dom 来创建它，但在我使用 bootstrap 之前它什么都不显示，可能会发生一些我没有的错误没看到我在这里发布我的代码，我只是创建一个页面并在 App.jsx 文件中使用它，但它什么也没显示，但是当我在 App 文件的返回函数中使用主页时，它工作得非常好并且没问题。我找不到任何错误。当我将主文件放在另一个目录中时，它只是说：

没有路线匹配位置“/”

但是当我把这 3 个文件放在一起时，它会说：

位置“/”的匹配叶路由没有元素。这意味着默认情况下它将呈现一个空值导致“空”页面。

这是我的 index.jsx 文件：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/pages/App';
import reportWebVitals from './reportWebVitals';

const rootElement = document.getElementById("root");
ReactDOM.render(
    <App/>,
    rootElement
)
;
reportWebVitals();

这里是 App.jsx 文件：

import '../../App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import React from "react";
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
import Home from './home';
import HeaderBar from '../layout/HeaderBar';

function App() {
    return (
        <Router >
            <div>
                <HeaderBar/>
                <Routes>
                    <Route exact path='./pages/home' element={</Home>}></Route>
                </Routes>
            </div>
        </Router>
    );
}

export default App;

还有我的主页文件：

import React from 'react';

const Home = () => {
    return (
        <div className="container">
            <h1 className='display-5 text-uppercase py-5 text-center'>
               Welcome to JavaScript World
            </h1>
        </div>
    );
};

export default Home;

最后这是我的 package.json：

{
  "name": "forex_trader",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.1.3",
    "react": "^17.0.2",
    "react-bootstrap": "^2.1.0",
    "react-dom": "^17.0.2",
    "react-router-bootstrap": "^0.26.0",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "styled-components": "^5.3.3",
    "web-vitals": "^2.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

编辑已解决：

在版本 6 中：

“组件”需要替换为

“元素”

需要关闭

<Route exact path="/" element={<Home/>}></Route>

【问题讨论】：

<Home> 组件使用“/”路径会更有意义。
@tromgy 我以前用过，但没有任何变化

标签： javascript reactjs react-router react-router-dom react-bootstrap

【解决方案1】：

在您的 App.jsx 文件中

你能用/pages/home替换./pages/home吗

它应该可以工作

【讨论】：

它说没有路线匹配位置“/”
如果您需要 Home 组件位于“/”，那么您应该将“./pages/Home”替换为“/”
我解决了我必须用 lib 新版本中的元素替换组件
是的，应该是元素。很高兴听到你解决了它

【解决方案2】：

我认为你的问题出在 App.js 中，你需要导入 react-router-dom 的 Switch，然后将其包裹在 Router 下方。

【讨论】：

当我使用它时，开关从库中删除，它返回错误
哦，我刚刚阅读了一些关于它的新版本，尝试导入“BrowserRouter, Route, Routes”而不是“BrowserRouter as Route, Routes”。