React router Link tag wokred in the first page and page also changed but in the 2nd page have many link If i click on this link it can changed the link but not body how can i fix it...
Router code :
<Switch>
<Route exact strict path="/">
<Home />
</Route>
<Route exact strict path="/about/">
<About />
</Route>
<Route exact strict path="/channel/:title" component={withRouter(Dashboard)} />
</Switch>
</div>
</Router>
2nd page code
function Dashboard() {
const { title } = useParams();
return (
<div>
<Play
title={title}
/>
</div>
);
}
Passing some data via props
//this is <Play/> component code just showing here shortly
<Router>
<VideoPlayer
controls={true}
src={this.state.link}
poster={this.state.poster}
width={window.screen.width}
height={window.screen.height - (window.screen.width+100)}
/>
<Link to="/channel/Rtv">Rtv</Link>
</div>
</Router>
just showing a little part of this code...
please help me ...how can i fix the error
Full code is here:
https://gist.github.com/fahadali32/8643d33a2328c1375552e4ba7637fc92
withRouter's documentation mentions:
withRouter does not subscribe to location changes like React Redux’s connect does for state changes. Instead, re-renders after location changes propagate out from the <Router> component. This means that withRouter does not re-render on route transitions unless its parent component re-renders.
This is not the behavior you want, so you shouldn't use withRouter.
So you should replace the line
<Route exact strict path="/channel/:title" component={withRouter(Dashboard)} />
with
<Route exact strict path="/channel/:title" component={Dashboard} />
If you need to access match or location or history, use the corresponding hook. You're already using useParams; you could also use useLocation or useHistory if you need them.
Ok i find the answer just simply add
<div key={this.props.link}>
<VideoPlayer controls={true} src={this.state.link} poster={this.state.poster} width={window.screen.width} height={window.screen.height - (window.screen.width+100)} />
</div>
Related
Here is the code screenshot.
I want to render Homepage component but I want to wrap it into these MainLayout component.
The problem is that screen is blank and there is no error in Terminal but when I inspect the page it says "Matched leaf route at location "/" does not have an element", so guys I know this is version update syntax problem because I had same problem when I was writing component= {component } but syntax has been changed and I should have written element={<component />}.
So I believe this is also syntax problem but I've done research but couldn't solve. I believe I should change this
/* ... */ render = {() => (
<MainLayout>
<Homepage />
</MainLayout>
)}
somewhat into newer syntax but don't know how.
The Route components in react-router-dom v6 no longer take component or render props; the routed components are rendered on the element prop as JSX.
<Routes>
...
<Route
path="/"
element={(
<MainLayout>
<Homepage />
</MainLayout>
)}
/>
...
</Routes>
Here is the code screenshot.
I want to render Homepage component but I want to wrap it into these MainLayout component.
The problem is that screen is blank and there is no error in Terminal but when I inspect the page it says "Matched leaf route at location "/" does not have an element", so guys I know this is version update syntax problem because I had same problem when I was writing component= {component } but syntax has been changed and I should have written element={<component />}.
So I believe this is also syntax problem but I've done research but couldn't solve. I believe I should change this
/* ... */ render = {() => (
<MainLayout>
<Homepage />
</MainLayout>
)}
somewhat into newer syntax but don't know how.
The Route components in react-router-dom v6 no longer take component or render props; the routed components are rendered on the element prop as JSX.
<Routes>
...
<Route
path="/"
element={(
<MainLayout>
<Homepage />
</MainLayout>
)}
/>
...
</Routes>
Here is the code screenshot.
I want to render Homepage component but I want to wrap it into these MainLayout component.
The problem is that screen is blank and there is no error in Terminal but when I inspect the page it says "Matched leaf route at location "/" does not have an element", so guys I know this is version update syntax problem because I had same problem when I was writing component= {component } but syntax has been changed and I should have written element={<component />}.
So I believe this is also syntax problem but I've done research but couldn't solve. I believe I should change this
/* ... */ render = {() => (
<MainLayout>
<Homepage />
</MainLayout>
)}
somewhat into newer syntax but don't know how.
The Route components in react-router-dom v6 no longer take component or render props; the routed components are rendered on the element prop as JSX.
<Routes>
...
<Route
path="/"
element={(
<MainLayout>
<Homepage />
</MainLayout>
)}
/>
...
</Routes>
I edited my questions as I realized it was not clear:
Visit https://codesandbox.io/s/dry-glitter-7lk9i?fontsize=14&hidenavigation=1&theme=dark
I was using states for the purpose of having the following structure:
Header
BODY (CONTENT)
Footer
Onclick actions or other events, I used states to hide components and show components in the body content.
I then wanted to be able to access a certain page by url ex (localhost:3000/privacy) So I'm looking to use Router to do so.
When I do a switch command, it does not hide my main component and show the switch, rather it shows both of them. How do I get the UI to react to the way I was initially coding?
You should wrap LandingPage component inside Route. Please check below for detail.
App.js
export default function App() {
return (
<Router>
<div className="App">
<Switch>
<Route exact path="/">
<Landingpage />
</Route>
<Route exact path="/businessregister">
<BusinessRegister />
</Route>
</Switch>
</div>
</Router>
);
}
Baymax has the correct answer but answering to explain a bit more.
The Switch component renders routes exclusively; it matches and returns the first matched route component. The Landingpage component iss always being rendered by the router no matter what the path is.
By moving Landingpage onto a route you can conditionally render it based upon the current path. Placing it last and not specifying a path means that if any route declared before it is matched and returned then it won't render, but if no routes match, then the Landingpage component route will match all paths and render.
function App() {
return (
<Router>
<div className="App">
<Switch>
<Route exact path="/businessregister">
<BusinessRegister />
</Route>
<Route component={Landingpage} /> // <-- render if nothing matches above
</Switch>
</div>
</Router>
);
}
Bellow is the App.js file. when ever I click on any of the nav bar the selected route is rendered.
function App() {
return (
<div>
<Layout>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/success-cards" component={Success_Cards} />
<Route path="/failure-cards" component={Failure_Cards} />
<Route path="/snap-photo" component={Snap_Photo} />
<Route path="/all-cards" component={All_Cards} />
<Route path="/user-guide" component={User_Guide}/>
<Route path="/rejected-cards" component={Rejected_Cards} />
</Switch>
</Layout>
</div>
);
}
export default App;
What I want is when I am clicking on some nav bar then it should call an API as a default to fetch few data. The challenging part is what method should I use to achieve on route change call a function to fetch data. Can anyone please help. I have tried comoponentDidMount, componentShouldMount etc...
Regarding to documentation fetching data in componentDidMount is a right choice
I would recommend using hooks if you aren't, but otherwise a possible way to handle what you want would be to wrap each route's component in the same component, and put the useEffect (hook version) or componentDidMount functionality in that component. That way the same logic will fire off each time any route that is wrapped in it is rendered.