URL-Routing-Problem bei der Verwendung von reagieren

Question

Ich erstelle Web-Anwendung mit reagieren und derzeit habe ich ein Problem beim Navigieren durch die Seiten. Nachfolgend ist die detaillierte Beschreibung. Hoffe, jemand kann mir helfen.

Meine Komponente (Aufgabe) ist wie diese (vereinfachter)

class Tasks extends Component { 

    constructor(props) { 
     super(props); 
     this.type = props.match.params.type; 
    } 


    render(){ 
     return (<h1>{this.type} </h1>); 
    } 
} 

Und ich tue das Routing von einem separaten Bauteil reagieren-Router-dom mit als

folgenden

: 
: 
import {BrowserRouter as Router, Route, Switch, Redirect} from 'react-router-dom' 
: 

    <Route path={"/tasks/:type/"} component={Tasks} /> 

Schließlich bin ich Rufen Sie diese Routing-Komponente aus einem meiner Navigationsmenüs auf, indem Sie die URLs wie folgt einstellen:

Wenn ich bei dieser Implementierung eine einzige URL auswähle (aus dem Navigationsmenü), funktioniert sie nicht wie erwartet. Wenn eines ausgewählt ist und dann das andere auswählt, navigiert es nicht wie erwartet. Wenn ich die URL im Browser eintippe oder die Seite aktualisiere, verweist sie auf die richtige Seite (andere URL).

Hoffe ich machte meine Frage klar: D. Kann mir jemand in die richtige Richtung zeigen, wie ich das beheben kann?

Dank

Answer 1

Sie sollten in Ihren Routen definierten Routen/Aufgaben/Typ1 und/Aufgaben/Typ2 haben. Sie können so etwas wie dieses Design:

//Assume MainRoutes.js : which would have your main app navigation routes. 
export default function MainRoutes(props) { 
    return(
    <Router> 
     <App> // Your Main App Component 
      <Switch> 
       <Route path='/' component={SomeHomeComponent}/> 
       <Route path='/tasks' component={TaskRoutes}> 
       <Route component={()=>(<NotFound/>)}/> 
      </Switch> 
     </App> 
    </Router> 
); 
} 

//TaskRoutes.js Component 
. 
. 
. 
<TaskLayout> 
    <Switch> 
     <Route path='/tasks/type1' component={Tasks}/> 
     <Route path='/tasks/type2' component={Tasks}/> 
    </Switch> 
</TaskLayout> 


//TaskLayout.js Component : where you can render your menu items 
. 
. 
. 
<MenuItem> 
    <Link name="application_creation" to="/tasks/type1">Type One</Link> 
</MenuItem> 
<MenuItem> 
    <Link name="application_creation" to="/tasks/type2">Type Two</Link> 
</MenuItem> 
. 
. 
. 

Wahrscheinlich in Ihrem Fall, Sie wollen Komponente neu machen, basierend auf Art, so etwas wie dieses:

class Tasks extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
     type: '' 
     } 
    } 

    componentDidMount() { 
     this.setState({ 
     type: this.props.match.params.type 
     }); 
    } 

    render(){ 
     return (<h1>{this.state.type} </h1>); 
    } 
} 

Update:

Wenn die Komponenteninstanz zum ersten Mal in DOM gerendert wird, ruft React Comp auf onentDidMount() wenn es definiert ist. Dies ist das erste Mal, dass Sie Zugriff auf das DOM und die Kinderreferenzen haben. Jetzt wird die Komponenteninstanz gerendert und lebt. Es wird leben und aktualisieren, bis es abgehängt ist.

ComponentDidMount wird einmal aufgerufen, wenn Sie zwischen Routen mit derselben Komponente und nur verschiedenen Parametern wechseln, die ursprüngliche Komponente wird nicht unmount oder remount. Dafür erhältst du neue Requisiten. Sie können also die Funktion componentWillReceiveProps (newProps) verwenden und nach newProps.params suchen. Dies ist das erwartete Verhalten. Jetzt hängt es davon ab, wie Sie Routen implementieren möchten. Sie können verschiedene Komponenten für Type1 und Type2 verwenden, wenn Sie das möchten.