反应路线未显示

时间:2017-07-02 17:59:43

标签: reactjs react-router react-router-dom

我有一条不渲染的路线。这可能是一个菜鸟问题,但我尝试了一切。使用最新版本的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>
        );
    }
}

我的检查员:

React inspector

Element inspector

2 个答案:

答案 0 :(得分:0)

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

您在浏览器上尝试使用哪个网址?还要确保controllerfloor组件的位置?

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

答案 1 :(得分:-1)

也许您还没有创建Controller组件,如果是这种情况,则需要在从Url调用它之前创建它。 否则,如果您正在做useEffect(() => { router.prefetch('/page-b'); }, []); ? 一切看起来都很好,但可能需要解决许多问题

否则从头开始