Question

我正在尝试显示react-component。我添加了一些路由mechanism。但它没有显示我的组件。这是我的代码

import React from 'react';
import {Route} from 'react-router-dom';
import Hello from '../Hello';

const Routers = ()=> (
    <Route exact path="/" component={Hello}></Route>
)

export default Routers;

Index.js

import React from 'react';
import { render } from 'react-dom';
import {Router } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';
import Routers from './router/router';

const history = createHistory();


render(
      <Router routes={Routers} history={history}></Router>

  , document.getElementById('root'));

Answer 1

您未正确使用<Router />。让<Routers />成为<Router />的孩子。

在您的示例中，将<Router routes={Routers} history={history}></Router>更改为：

<Router history={history}>
    <Routers />
</Router>

Answer 2

<Router/>提供路线所需的上下文。

您需要将代码修改为

import React from 'react';
import {Route} from 'react-router-dom';
import Hello from '../Hello';

const Routers = ()=> (
    <Router>
        <Route exact path="/" component={Hello}/>
    </Router>
)

export default Routers;

<强> index.js

import React from 'react';
import { render } from 'react-dom';
import {Router } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';
import Routers from './router/router';

const history = createHistory();


render(<Routers history={history}/>, document.getElementById('root'));

为什么我的组件不显示使用反应？

2 个答案: