为什么我的组件不显示使用反应？(why my component is not display using react?)

为什么我的组件不显示使用反应？(why my component is not display using react?)

我试图显示一个react-component 。我添加了一些路由mechanism但它不显示我的组件。 这是我的代码

https://codesandbox.io/s/WnJl4DKOJ

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'));

I am trying to display a react-component .I added some routing mechanism .but it not display my component. here is my code

https://codesandbox.io/s/WnJl4DKOJ

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'));

最满意答案

您没有正确使用<Router /> 。 使<Routers />成为<Router /> 。

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

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

You're not using the <Router /> properly. Make your <Routers /> a child of <Router />.

In your example, change <Router routes={Routers} history={history}></Router> to:

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