0

我有一条未渲染的路线。这可能是一个菜鸟问题,但我尝试了一切。使用最新版本的 React、react-route-dom 和 es6。

我的 App.js:

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import Controller from './Controller'
import Floor from './Floor'


const App = () => {

return (
    <div>
    <Router>
        <Switch>
            <Route path="/floor" component={Floor}/>
            <Route path="/controller" component={Controller}/>
        </Switch>
    </Router>
    </div>
    )

}

export default App

我的组件:

import React, { Component } from 'react';
import ReactDOM from 'react-dom'

export default class Floor extends Component {
    render() {
        return (
            <div>Floor</div>
        );
    }
}

我的检查员:

反应检查员

元素检查器

4

2 回答 2

0

你不再需要SwitchReact Router 6。它应该是:

<Routes>
    <Route exact path="/" component={<Home />} />
    <Route exact path="/Register" element={<Register />} />
    <Route exact path="/Login" component={<Login />} />
    <Route path="*" element={<ErrorPage />} />
</Routes>

不再:

<Switch>
    <Route exact path="/" component={<Home />} />
    <Route exact path="/Register" element={<Register />} />
    <Route exact path="/Login" component={<Login />} />
    <Route path="*" element={<ErrorPage />} />
</Switch>

另外,现在是这样写的:

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

不是这样的:

<Route path="/floor" component={Floor} />
于 2021-12-13T21:37:35.660 回答
0

我试过你的代码,它对我来说很好。

您在浏览器上尝试使用哪个 URL?还有你确定controllerfloor组件的位置吗?

对我来说,我可以访问http://localhost:3000/controller并正常工作。

于 2017-07-13T05:56:20.690 回答