Reagiere den Router nicht mit Komponenten?

Question

Ich versuche, neue Komponenten zu rendern, ohne die ursprüngliche Home-Komponente anzuzeigen. Ich habe meine Komponenten getrennt und jetzt, wenn ich versuche sie auszugeben, wird sie nicht angezeigt.

class App extends Component { 
render() { 
return (
    <div> 
     <Route exact={true} path="/" component={Home} /> 
    </div> 
); 
} 
} 

Hier ist meine Heimat Komponente, die die About Komponente und Pages Komponente machen soll, aber zur Zeit, wenn ich es klicken, um es zeigt nichts an.

const Home =() => (
<div> 
    <h2>Home page</h2> 
    <div> 
     <ul> 
      <li><Link to="/about">About</Link></li> 
      <li><Link to="/pages">Page with Subpages</Link></li> 
     </ul> 
     <Route path="/about" component={About} /> 
     <Route path="/pages" component={Pages} /> 
    </div> 
</div> 
) 

Meine Über Komponente:

const About =() => (
<div> 
    <h2>About page</h2> 
</div> 
) 

Meine Seiten-Komponente:

const Pages = ({ match }) => (
<div> 
    <h2>Page with Subpages</h2> 
    <ul> 
     <li><Link to={`${match.url}/subpage1`}>Subpage 1</Link></li> 
     <li><Link to={`${match.url}/subpage2`}>Subpage 2</Link></li> 
     <li><Link to={`${match.url}/subpage3`}>Subpage 3</Link></li> 
    </ul> 

    <Route path={`${match.url}/subpage1`} component={Subpage1}/> 
    <Route path={`${match.url}/subpage2`} component={Subpage2}/> 
    <Route path={`${match.url}/subpage3`} component={Subpage3}/> 
</div> 
) 

Answer 1

Ich denke, sollten Sie exact von <Route path="/" component={Home} />, weil in Ihrem Fall löschen Sie platzieren Über und Seiten-Komponente unter Home, also wenn du auf /about url gehst, gibt es keine Home-Komponente mehr, weil du exact dort hingestellt hast, also siehst du ein leeres Geröll n;

class App extends React.Component { 
    render() { 
    return (
     <div> 
     <Route path="/" component={Home} /> 
     </div> 
); 
    } 
} 

Vollarbeitsbeispiel hier: https://codesandbox.io/s/mjr8xypp4x

Answer 2

Sie haben vergessen, müssen <Router> Komponente hinzufügen, wie von <BrowserRouter>, die als Hauptkomponente in der Klasse Component eingebettet werden muss, wo Haupt Route definiert ist,

Hier die Lösung -

import React from 'react'; 
import { 
    BrowserRouter as Router, 
    Route, 
    Link 
} from 'react-router-dom' 

class Appz extends React.Component { 
    render() { 
     return (
     <Router> 
     <div> 
      <ul> 
      <li><Link to="/about">Home</Link></li> 
      </ul> 
      <div> 
      <Route path="/" component={Home} /> 
      </div> 
      </div> 
     </Router> 
    ); 
    } 
} 

const Home =() => (
    <div> 
    <h2>Home page</h2> 
    <div> 
     <ul> 
     <li><Link to="/about">About</Link></li> 
     <li><Link to="/pages">Page with Subpages</Link></li> 
     </ul> 
     <Route path="/about" component={About} /> 
     <Route path="/pages" component={Pages} /> 
    </div> 
    </div> 
) 

const About =() => (
    <div> 
    <h2>About page</h2> 
    </div> 
) 

const Pages = ({ match }) => (
    <div> 
    <h2>Page with Subpages</h2> 
    <ul> 
     <li><Link to={`${match.url}/subpage1`}>Subpage 1</Link></li> 
     <li><Link to={`${match.url}/subpage2`}>Subpage 2</Link></li> 
     <li><Link to={`${match.url}/subpage3`}>Subpage 3</Link></li> 
    </ul> 


    </div> 
) 

export default Appz; 

Arbeitsbeispiel - https://codesandbox.io/s/kxmj48p14v