Quiero usar React-Router para cambiar el componente <Frontpage />
con el componente <Question />
después de hacer clic en "Los geht's".
Ignore el método handleClick, fue uno de mis primeros intentos sin react-router.
import React from 'react';
import './App.css';
import Frontpage from './Frontpage'
import Question from './components/Question'
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
class App extends React.Component {
constructor() {
super()
this.state = {
showComponent: false,
}
this.handeClick = this.handleClick.bind(this)
}
handleClick = () => {
this.setState({
showComponent: true })
// console.log("The button was clicked!")
// document.getElementById('page')
// document.getElementsByClassName('App-Header')
}
render() {
return (
<Router>
<div className="App">
<Frontpage />
<Link to={'/Question'} className="nav-link"> Los geht's </Link>
<Switch>
<Route path='/Question' component={Question} />
</Switch>
</div>
</Router>
);
}
}
export default App;
Todo lo que obtengo es un nuevo Componente debajo de mi "página de bienvenida", pero necesita mostrar toda la página como nueva y mostrar la "segunda página".
3 respuestas
Puede mostrar <Frontpage />
solo si la ruta coincide exactamente con /
así:
render() {
return (
<Router>
<div className="App">
<Switch>
<Route path='/' exact >
<Frontpage />
<Link to={'/Question'} className="nav-link"> Los geht's </Link>
</Route>
<Route path='/Question' component={Question} />
</Switch>
</div>
</Router>
);
Puedes lograrlo así:
render() {
const SelectedComponent = someCondition ? Question : OtherComponent;
return (
<Router>
<div className="App">
<Frontpage />
<Link to={'/Question'} className="nav-link"> Los geht's </Link>
<Switch>
<Route path='/Question' component={SelectedComponent} />
</Switch>
</div>
</Router>
);
}
Reestructurando mi respuesta ahora que el resultado deseado es un poco más claro. Esto debería hacer lo que estás buscando.
render() {
return (
<Router>
<div className="App">
<Link to="/">Frontpage</Link>
<Link to="/Question">Question</Link>
<Switch>
<Route path="/" exact component={Frontpage} />
<Route path="/Question" exact component={Question} />
</Switch>
</div>
</Router>
);
}
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.