React-router <Route> 标签不渲染组件

Question

我运行遇到了一个问题，我的路由标记具体而言没有呈现任何组件。

我尝试过的步骤：

更改了从“react-router-dom”导入 {Route}。
更改路径以查看其他路径是否呈现。
在标签内呈现组件（有效）。

这个问题似乎是标签出了问题。

这是我的代码的副本：

import { Component } from "react";
//import all components rendered
import NavBar from "./Nav";
import Orders from "./Orders";
import Cart from "./Cart";
import Menu from "./Menu";
import Login from "./Login.jsx";
import Home from "./Home.jsx";
// for routing
import { Route } from "react-router";
import { BrowserRouter } from "react-router-dom";

//main App to combine all components and be rendered
class App extends Component {
    render() {
        return (
            <BrowserRouter>
                <NavBar />
                <Route path="/" exact component={Login} />
            </BrowserRouter>
        )
    }
}

export default App;

版本是：

├─┬ react-router-dom@6.2.1
│ └── react-router@6.2.1 deduped
└── react-router@6.2.1

我尝试按照建议更改标签，但仍然无效，但我可能实施不正确。这是我尝试过的：

import { Component } from "react";
//import all components rendered
import NavBar from "./Nav";
import Orders from "./Orders";
import Cart from "./Cart";
import Menu from "./Menu";
import Login from "./Login.jsx";
import Home from "./Home.jsx";
// for routing
import { Route } from "react-router";
import { BrowserRouter, Routes } from "react-router-dom";

//main App to combine all components and be rendered
class App extends Component {
    render() {
        return (
            <Routes>
                <NavBar />
                <Route path="/" exact component={Login} />
            </Routes>
        )
    }
}

export default App;

我在控制台上遇到的错误是：

Uncaught Error: useRoutes() may be used only in the context of a <Router> component.
    Choo 3
    React 17
    Choo 2
    Webpack 3

The above error occurred in the <Routes> component:

Routes@http://localhost:3000/static/js/bundle.js:54433:7
App@http://localhost:3000/static/js/bundle.js:42:1

如有任何帮助，我们将不胜感激！

解决方案：

已通过将“组件”标签切换为“元素”标签并删除外部标签解决，如下所示：

            <>
                <NavBar />
                <Routes>
                    <Route path="/" exact element={<Login />} />
                </Routes>
            </>

Answer 1

我运行在 react router v6 上遇到了同样的问题，您需要将所有路由包装在 react-router-dom.

的 Routes 组件中

Answer 2

列表项

将 Navbar 放在 Routes 标签外面，就像我在下面做的那样

import { BrowserRouter, Routes,Route } from "react-router-dom";

//main App to combine all components and be rendered
class App extends Component {
    render() {
        return (
           <>
            <NavBar />
            <Routes>
                <Route path="/" element={<Login/>} />
            </Routes>
          </>
        )
    }
}

export default App;

对于更新版本的 react-router-dom 使用 element 而不是 component并删除 exact 那边用BrowserRouterindex.js和wrapper App就好了例如 index.js

<BrowserRouter><App/></BrowserRouter>

Answer 3

试试这个：

import { Component } from "react";
//import all components rendered
import NavBar from "./Nav";
import Orders from "./Orders";
import Cart from "./Cart";
import Menu from "./Menu";
import Login from "./Login.jsx";
import Home from "./Home.jsx";
// for routing
import { BrowserRouter, Route, Routes } from "react-router-dom";

//main App to combine all components and be rendered
class App extends Component {
    render() {
        return (
            <BrowserRouter>
                <NavBar />
                <Routes>
                   <Route path="/" element={<Login/>} exact/>
                </Routes>
            </BrowserRouter>
        )
    }
}

export default App;

React-router <Route> 标签不渲染组件

React-router <Route> tag not rendering component

javascript

reactjs

react-router

react-router-dom