React Routing mit bedingten Rendering

Question

Ich versuche, die URL abhängig von der Komponente, die bedingt gerendert wird (fast fb tutorial fast genau). Ich übersprang einige Details, aber im Wesentlichen Code sieht wie folgt aus:

class ParentComponent extends React.Component { 

    render() { 
    const isTrue = this.state.isTrue; 

    let component= null; 
    if (isTrue) { 
     component = <Component1/>; 
    } else { 
     component= <Component2/>; 
    } 

    return (
    <div> 
     {component} 
     <Component3/> 
      ... 
     <ComponentN/> 
    </div> 
    ); 
    } 
} 

Jetzt will ich die URL entweder/oder Komponente1/komponente2 sein, je nachdem, welche Komponente geladen wird. Ich habe versucht, browserHistory.push ('/ component1') hinzuzufügen, aber es funktioniert nicht zum arbeiten.Auch habe ich this versucht, aber ohne Erfolg.

Ich bin neu in Frontend-Entwicklung, also bitte korrigieren Sie mich, wenn ich falsch liege. Meiner Meinung nach kann das Problem nur dann nicht gelöst werden, weil ich eigentlich möchte, dass die Seite zu jeder Zeit auf der "Eltern-Komponente" bleibt. Aber wenn eine der Komponenten (1 oder 2) geladen ist, sollte die URL aktualisiert werden. Hoffe, das macht Sinn.

Versionen:

npm -v react-router 
5.2.0 

Dank!

Answer 1

Bitte versuchen Sie den folgenden Code. Es sollte wie erwartet funktionieren. Ich habe die Link-Navigation im Code verwendet. Sie können state für Conditional Rendering verwenden. Lassen Sie es mich wissen, falls Sie Hilfe benötigen.

UPDATE: Erstellt Fiddle für noch mehr klare Lösung - https://jsfiddle.net/fo6zupgj/8/

class ComponentOne extends React.Component { 
 
    render() { 
 
    return (
 
     <div> 
 
     <h2>Component 1</h2> 
 
     <button onClick={() => this.props.history.goBack()}>Go Back</button> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ComponentOne = ReactRouterDOM.withRouter(ComponentOne); 
 

 
class ComponentTwo extends React.Component { 
 
    render() { 
 
    return (
 
     <div> 
 
     <h2>Component 2</h2> 
 
     <button onClick={() => this.props.history.goBack()}>Go Back</button> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ComponentTwo = ReactRouterDOM.withRouter(ComponentTwo); 
 

 
class Home extends React.Component { 
 
    handleNavComponent(ev, index) { 
 
    ev.preventDefault(); 
 
    const { history } = this.props; 
 
    
 
    history.push(`/component${index}`); 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <ul> 
 
     <li><a href="#" onClick={(ev) => this.handleNavComponent(ev, 1)}>Component 1</a></li> 
 
     <li><a href="#" onClick={(ev) => this.handleNavComponent(ev, 2)}>Component 2</a></li> 
 
     </ul> 
 
    ) 
 
    } 
 
} 
 

 
Home = ReactRouterDOM.withRouter(Home); 
 

 
const DynamicRoutes = (props => { 
 
    const { Route } = ReactRouterDOM; 
 
    
 
    return (
 
    <Route path={props.path} component={props.component} /> 
 
); 
 
}); 
 

 
const components = [ 
 
    { path: "/component1", name: ComponentOne }, 
 
    { path: "/component2", name: ComponentTwo } 
 
]; 
 

 
class App extends React.Component { 
 
    render() { 
 
    const { BrowserRouter, HashRouter, Switch, Route } = ReactRouterDOM; 
 
    
 
    return (
 
     <HashRouter> 
 
     <Switch> 
 
      { components.map(c => <DynamicRoutes path={c.path} component={c.name} />) } 
 
      <Route path="/" component={Home} /> 
 
     </Switch> 
 
     </HashRouter> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script> 
 

 
<div id="root"></div>

können Sie diese docs auf react-router für mehr beziehen.