Warum wird meine Komponente nicht mit reagieren angezeigt?

Question

Ich versuche, eine react-component anzuzeigen. Ich habe einige Routing mechanism hinzugefügt, aber es zeigt nicht meine Komponente. hier ist mein 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')); 

Answer 1

Sie sind nicht die <Router /> richtig verwenden. Machen Sie Ihre <Routers /> ein Kind von <Router />.

In Ihrem Beispiel ändert <Router routes={Routers} history={history}></Router> zu:

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

Answer 2

<Router/> stellt den erforderlichen Kontext für die Routen.

Sie müssen Ihren Code als

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

ändern