I am having a very simple app with Carousel. Each slide has a button. When the user clicks on the buttons, it should show the corresponding page at the bottom container. I am passing individual Slide from the parent component as a property called content. Below is my code
Snippet from Slidebar.js which is passing the slides to SlideContent
<div css={SliderBarCss}>
{this.props.slides.map((slide, i) => (
<SlideContent key={i} content={slide} />
))}
</div>
SlideContent.js
/** #jsx jsx */
import React from 'react';
import { BrowserRouter, Link } from 'react-router-dom';
import Routes from './Routes';
import { css, jsx } from '#emotion/core'
export default class SlideContent extends React.Component {
constructor(props) {
super(props);
}
render(){
<div>
<h1>{this.props.content.title}</h1>
<p>{this.props.content.description}</p>
<BrowserRouter>
<Link to={this.props.content.link}><button>{this.props.content.button}</button>
</Link>
</BrowserRouter>
</div>
)
}
}
I have defined the Routes in another file Routes.js
import React, { Component } from 'react';
import { css, jsx } from '#emotion/core'
import { Route, Link, Switch, Redirect } from 'react-router-dom';
import Component1 from '../innerComponents/Component1';
import Component2 from '../innerComponents/Component2';
import HomeComponent from '../innerComponents/Home';
class Routes extends Component{
constructor(props){
super(props);
}
render(){
return(
<Switch>
<Route exact path="/Home" component={HomeComponent} />
<Route exact path="/">
<Redirect to="/Home" />
</Route>
<Route exact path="/Component1" component={Component1} />
<Route exact path="/Component2" component={Component2} />
</Switch>
)
}
}
export default Routes;
below is my app.js where I want my content to show up on button click.
function App() {
return (
<div className="App">
<SliderContainer/>
<BrowserRouter>
<Route component={Routes}></Route>
</BrowserRouter>
</div>
);
}
The URL on the top is changing but the view is not. Really appreciate any help
SOLUTION:
I removed the BrowserRouter element from SlideContent.js and MainContent.js. Added it as a parent to both SliderContainer and MainContent. Shown below are all changed the files
Removed BrowserRouter from SlideContent.js
export default class SlideContent extends React.Component {
constructor(props) {
super(props);
}
render(){
<div>
<h1>{this.props.content.title}</h1>
<p>{this.props.content.description}</p>
<Link to={this.props.content.link}><button>{this.props.content.button}</button>
</Link>
</div>
)
}
Removed BrowserRounter from MainContent.js
class MainContent extends React.Component{
render(){
return(
<Route component={Routes}></Route>
)
}
}
Added BrowserRouter to the parent of SliderContainer and MainContent
app.js
function App() {
return (
<div className="App">
<BrowserRouter>
<SliderContainer/>
<MainContent/>
</BrowserRouter>
</div>
);
}
export default App;
Related
I have a problem I am new and I am trying to use React Router but it shows me a blank page whenever I use it
Here is my code:
import React, {Component} from 'react';
import {BrowserRouter as Router, Route} from 'react-router-dom';
class TodoApp extends Component{
render() {
return (
<div className="TodoApp">
<Router>
<>
<Route path="/" element={<WelcomeComponent />} />
</>
</Router>
</div>
)
}
}
class WelcomeComponent extends Component{
render()
{
return <div>
abcd
</div>
}
}
If I delete the route line
and instead I write somthing else the code works fine so I know I have a problem with the Route line and I am not sure what is it
Route can only be child of Routes. Try adding Routes as parent like below and you should see WelcomeComponent loading up.
render() {
return (
<div className="TodoApp">
<Router>
<Routes>
<Route path="/" element={<WelcomeComponent />} />
</Routes>
</Router>
</div>
);
}
when rendering more that one line of code, your return needs to wrap them in a parenthesis.
your WelcomeComponent should look like this
class WelcomeComponent extends Component{
render()
{
return (
<div>
abcd
</div>
)
}
}
import {BrowserRouter as Router, Route} from 'react-router-dom';
import Home from './Home';
class App extends Component {
constructor(props){
super(props);
this.state = {value: true}
this.goBack = this.goBack.bind(this);
}
goBack() {
this.props.history.goBack();
}
render() {
return (
<Router>
<div className="App">
<div className="App-header">
<button onClick={this.goBack}>Go Back</button>
</div>
<Route path="/" exact render={() => <Home value={this.state.value}/>}/>
<Route path="/details/:id" component={DetailView}/>
</div>
</Router>
);
}
}
export default App;
This is code. On click of Back button i want to take me to the previous age. But this goBack() is not working for me. Probably I am making some mistake in using it.I tried couple of ways from guthub and stackover flow but nothing worked.
can you try adding withRouter
import {..., withRouter} from 'react-router-dom';
then change export to
export default wihRouter(App);
App component does not receive history as prop because the Router is rendered inside it, instead you can create a wrapper component that is in the route to use this.props.history.
class App extends Component {
render() {
return (
<Router>
<Route path="/" component={Content} />
</Router>
)
}
}
For the content component:
class Content extends Component {
constructor(props){
super(props);
this.state = {value: true}
this.goBack = this.goBack.bind(this);
}
goBack() {
this.props.history.goBack();
}
render() {
return (
<div className="App">
<div className="App-header">
<button onClick={this.goBack}>Go Back</button>
</div>
<Route path="/" exact render={() => <Home value={this.state.value}/>}/>
<Route path="/details/:id" component={DetailView}/>
</div>
);
}
}
Now, Content component is in the route and can receive the history prop.
Another way you can handle this is to simply render the Content component in App with <Content /> and then use withRouter HOC on Content.
withRouter
PS: You cannot apply withRouter to App component because technically App is outside the Router
Here is how the router I defined :
import React from 'react';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import PersonsList from './PersonsList';
import Error from './Error'
import Person from './Person'
const Router = () => (
<BrowserRouter>
<Switch>
<Route path="/persons" strict={false} component={PersonsList}/>
<Route path="/persons/:id" component={Person}/>
<Route component={Error}/>
</Switch>
</BrowserRouter>
);
export default Router;
The first route works perfectly.
The problem is that in the PersonsList, when I try to reach the /persons/:id route, I get a blank page.
Here is the code I use for redirection in the PersonsList component :
static propTypes = {
history: PropTypes.object
};
handleRedirection = (aPerson) => {
this.props.history.push(`/persons/${aPerson.id}`);
}
...
{this.state.persons.map(aPerson => (
<React.Fragment key={aPerson.id}>
<div className="row" onClick={this.handleRedirection.bind(this,aPerson)}>
Here is the Person component :
import React from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router';
class Person extends React.Component {
static propTypes = {
match: PropTypes.object
};
constructor(props){
super(props);
console.log('the selected person : ' + this.props.match.params.id);
}
render(){
return(
<div>A person</div>
)
}
}
export default withRouter(Person);
I can see the console.log output but no rendering of the <div>A person</div>.
Question
Why the second route returns a blank content knowing its component's constructor is called? Why the rendering is not processed ?
i try this.props.history.push('/home'); code part but not correct running.
you can see my component codes in the below.
my full component code :
class Full extends Component {
render() {
return (
<div className="app">
<Header/>
<div className="app-body">
<Sidebar {...this.props}/>
<main className="main">
<Breadcrumb/>
<Container fluid>
<Switch>
<Route path="/dashboard" name="Dashboard" component={Dashboard}/>
<Route path="/applications" name="Applications" component={Applications}/>
<Route path="/roles" name="Roles" component={Roles}/>
<Route path="/poc" name="poc" component={Poc}/>
<Redirect from="/home" to="/dashboard"/>
</Switch>
</Container>
</main>
<Aside/>
</div>
<Footer/>
</div>
);
}
}
Dashboard component code :
class Dashboard extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="animated fadeIn">
<div>test</div>
</div>
)
}
}
export default Dashboard;
History Code:
import {createBrowserHistory} from 'history';
export const history = createBrowserHistory();
How to pass child component class as props to parent component in React.
My Parent component code :
import React, { Component } from 'react';
import { DashBoard } from './DashBoard/DashBoard';
import { DashBoard } from './Details/Details';
class ContentArea extends Component {
render() {
return (
<div className="content-wrapper">
<DashBoard />
<Details />
</div>
)
}
}
export default ContentArea;
And my child component code :
import React, { Component } from 'react';
export class DashBoard extends Component {
render() {
return (
<h1>This is DashBoard Page.</h1>
);
}
}
And my Route.js code :
import React, { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { App } from './App';
import { DashBoard } from './components/DashBoard/DashBoard';
import { Details } from './components/Details/Details';
export class AppRoute extends Component {
render() {
return (
<Router>
<div>
<Route exact path={'/'} component={App} />
<Route path={'/DashBoard'} component={DashBoard} />
<Route path={'/Details'} component={Details} />
</div>
</Router>
);
}
}
App.js :
import React, { Component } from 'react';
import SideBar from './components/SideBar';
import Footer from './components/Footer';
import Header from './components/Header/Header';
import ContentArea from './components/ContentArea';
export class App extends Component {
render() {
return (
<div className="skin-purple">
<Header />
<SideBar />
<ContentArea />
<Footer/>
</div>
);
}
}
Now I want to pass my all child component as props to the parent component. And while routing the child component should get render inside the parent component.
Can anyone help me how to achieve that??
Since ContentArea is in App component and you wish to render DashBoard and Details in it, you could specify nested Routes at ContentArea level.
export class AppRoute extends Component {
render() {
return (
<Router>
<div>
<Route path={'/'} component={App} />
</div>
</Router>
);
}
}
import { DashBoard } from './DashBoard/DashBoard';
import { Details } from './Details/Details';
class ContentArea extends Component {
render() {
return (
<div className="content-wrapper">
<Route exact path={'/DashBoard'} component={DashBoard} />
<Route exact path={'/Details'} component={Details} />
</div>
)
}
}
export default ContentArea;
I am using react router 4. I have two components 1- ShopLogin 2- Shopper. I am trying to redirect from ShopLogin component to Shopper component after button click.
Everything is working fine. URL is also changing after button click. I am able to see 'Hello' also.
But the problem is i am able to see both component on browser after button click. component is not refreshing. not sure why it is happening. Below are my code.
import React from 'react';
import PropTypes from 'prop-types';
export class ShopLogin extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
SignIn(e) {
e.preventDefault();
this.context.router.history.push('/shopper');
}
render() {
return (
<div>
<button onClick={this.SignIn.bind(this)}>SignIn</button>
</div>
);
}
}
ShopLogin.contextTypes = {
router: PropTypes.object
}
export default ShopLogin;
My Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import ShopLogin from './ShopLogin';
import Shopper from './Shopper';
import { HashRouter,Route } from 'react-router-dom';
ReactDOM.render((
<HashRouter>
<div>
<Route path="/" component={ShopLogin} />
<Route path="/shopperlogin" component={ShopLogin} />
<Route path="/shopper" component={Shopper} />
</div>
</HashRouter>
), document.getElementById('root'))
My Shopper.js
import React, { Component } from 'react';
export class Shopper extends Component {
constructor(props)
{
super(props);
this.state = {
};
}
render()
{
return (
<div>
Hello </div>
);
}
}
export default Shopper;
It will show multiple components since on the route '/shopper'. The Routes checks successfully to the ShopLogin Component with the path '/' and it checks successfully to the Shopper Component with the path '/shopper'.
I would create a parent Component e.g. Main that just presents the child components and define the routes like this
import IndexRoute from react-router
import { HashRouter,Route, IndexRoute } from 'react-router-dom';
resort your routes to
<HashRouter>
<Route path='/' component={Main}>
<Route path='/shopper' component={Shopper} />
<IndexRoute component={ShopLogin} />
</Route>
</HashRouter>
Create your parent component for ShopLogin and Shopper components
class Main extends Component {
render(){
return (
<div>
{this.props.children}
</div>
)
}
Try to reorder your routes and use the exact attribute and wrap all the routes with a Switch.
<HashRouter>
<div>
<Switch>
<Route path="/" component={ShopLogin} />
<Route exact path="/shopper" component={Shopper} />
<Route path="/shopperlogin" component={ShopLogin} />
</Switch>
</div>
</HashRouter>