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>
);
}
Related
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>
I have a question about the React Router.
Now, I have a webpage with that looks like this:
As you can see there is another link on the page called "Custom Hooks".If I click on it, it will be shown something like this:
What I want now is to go to the a new page which the link shown in the image above, where the page will only shown me the "Example" and not the "This is UseState function" text.
In my code:
With my code, it cannot performs the route that I want to.
How can I fix this?
Thank you
This is happening because you seem to have misunderstood how the Switch component works. Think of it as a way of selecting what component to render based on the url. In the above code snippet,
<Link to="/Homepage"><Button>Back to Homepage</Button></Link>
<h1>This is UseState Function</h1>
<div>Example</div><Link to="/UseStatePage/UseStateFunction">Custom Hooks</Link>
is not under , meaning that whenever UseStateWebpage component is rendered, the Link, h1 and div with 'This is UseState Function' will always be rendered. If you want it to be rendered optionally based on the URL, there are multiple ways to achieve it. One way is as follows.
<Router>
<Switch>
<Route path="/UseStatePage" exact render={
()=>{
return(
<React.Fragment>
<Link to="/Homepage"><Button>Back to Homepage</Button></Link>
<h1>This is UseState Function</h1>
<div>Example</div><Link to="/UseStatePage/UseStateFunction">Custom Hooks</Link>
<React.Fragment>
)
}
}/>
</Switch>
<Switch>
<Route path="/UseStatePage/UseStateFunction" exact component={UseStateFunction}/>
<Switch>
<Router>
Neither the h1 nor div with example text are rendered into a route so they will always be rendered. Render the "homepage" content into its own route, something like the following.
function useStateWebPage() {
return (
<Router>
<Link to="/Homepage">Back To Homepage</Link>
<Switch>
<Route
path="/UseStatePage/UseStateFunction"
component={UseStateFunction}
/>
<Route path="/Homepage>
<h1>This is UseState function</h1>
<div>
Example
<Link to="/UseStatePage/UseStateFunction">custom Hooks</Link>
</div>
</Route>
</Switch>
</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.
I have tried following the answer on this question but to no avail.
I am trying to use react router and nested routes to render different layouts depending on the configuration of the router.
But the route with path="/" always shows regardless of the URL that is present.
Here is the router that I am using.
<Route component={App}>
<Route component={LayoutOne}>
<Route path="/" component={ComponentOne}/>
</Route>
<Route component={LayoutTwo}>
<Route path="category" component={ComponentTwo}/>
</Route>
</Route>
And here is the App file that I use to map the dispatch to the props, and connect.
function mapStateToProps(state, ownProps){
return{
exampleProp: state.exampleProp,
};
}
function mapDispatchToProps(dispatch){
return bindActionCreators(actionCreators, dispatch);
}
const App = connect(mapStateToProps, mapDispatchToProps)(MainLayout);
export default App;
Here is the main layout MainLayout as seen above.
export default class MainLayout extends Component {
render(){
<div className="main-layout">
{this.props.children}
</div>
}
}
LayoutOne and LayoutTwo(has been omitted for brevity) are simple class rappers as follows.
export default class LayoutOne extends Component{
render(){
return(
{this.props.children}
)
}
}
And here the ComponentOne and ComponentTwo respectively are just simple components.
My problem is that only ComponentOne renders regardless of what URL is present.
How do I fix this issue so that I could use nested routes as shown above?
Your help would be much appreciated.
If you need any additional information, please ask and I will do my best to update the question with the required information.
Thanks.
The problem you're having is that the index route, i.e. '/', is being matched first in your route tree, and because it matches any route, it is the route that gets rendered every time.
You can fix this by moving the Route with path="category" above the one with path="/". This way the more detailed route option gets checked first. I would also recommend changing path="category" to path="/category" just for clarity's sake as both are root level routes.
Changing your routes to look like this should fix your problem
<Route component={App} path="/">
<Route component={LayoutOne} path="">
<Route component={ComponentOne}/>
</Route>
<Route component={LayoutTwo} path="category">
<Route component={ComponentTwo}/>
</Route>
</Route>
So I have my routes defines as follows:
<Route path="/manage" component={Manage}>
<IndexRoute component={Manage}></IndexRoute>
<Route path=":id" component={Edit}></Route>
</Route>
</Route>
Now when I click on a button in my Manage component I call following function:
handleEditClick(e) {
e.preventDefault();
let selectedId= this.state.selectedId;
this.props.router.replace("/manage/" + selectedId);
},
My browser does display me the correct link but my component is not loaded as should. It only renders me the Manage component and not the Edit component.
Am I missing something here?
UPDATE
changing the child route to <Route path="/manage/:id" component={Edit}></Route> also loads me the Manage component
UPDATE 2
if I do not use child routes but in stead create them on the same level, the Edit component does render, but I'd like to use child routes.
On your render() you need a {this.props.children} ... it's where React router knows where to put child Component
In your routes
<Route path="/manage" component={Manage}>
<IndexRoute component={Manage}></IndexRoute>
<Route path=":id" component={Edit}></Route>
</Route>
If you navigate to /manage/:id, React Router renders Manager and Edit components... but where to put Edit?
So
you need to have something like this.
class Manager extends Component {
render(){
return (
<div>
Hello
{this.props.children}
</div>
);
}
}
So React Router knows to put Edit along side when you go to /manage/:id
<div>
Hello
<Edit />
</div>