I have a problem when trying to hide the navbar on my login page but i don't know how to do this.
You can see my code here:
render() {
return (
<Router>
<div >
<Nav />
<button type="button" className="form-submit_logout" onClick=
{this.handleLogout.bind(this)}>Logout</button>
<Route path="/" exact component={Login}/>
<Route path="/ChooseRole" exact component={ChooseRole}/>
<Route path="/DashboardGeek" exact component= .
{DashboardGeek}/>
<Route path="/DashboardAdmin" exact component= .
{DashboardAdmin}/>
</div>
</Router>
Please help me solve this problem. Thank you
This is because you have the component at root level, so it'd render in all pages.
Try including it as child to ChooseRole, DashboardGeek and DashboardAdmin components individually. That should solve the problem.
There are a few ways around this, it depends on the scale of your application but IMO the simplest is below.
I would assume you are using a boolean or a user object in your App or global state? Try adding a boolean to render the Nav like: {this.state.loggedIn ? <Nav /> : ''}
You can also generate an 'AppTemplate' component that passes the routes as props.children or includes it in every page.
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>
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>
Hello guys and welcome to the next episode of New to React so lets experiment! In this episode we present:
Trying display the Home component on application start.
I went with building the homepage in a different component, not sure if this is the right approach but I thought it would be nice to keep the App.js clean from all the html and such.
Doing this though, causes a problem it seems, as it does not seem to show the Home component on app boot (duh), instead it just displays a black page. In order to get to the hompage you need to click the navbar brand link in the Navigation since I've added a link for that.
class App extends Component {
render() {
return (
<BrowserRouter>
<div className="App">
<Navigation />
<div>
<div>
<h1>Some content</h1>
</div>
<div>
<Route exact path="/" component={Home} />
<Route path="/page1" component={page1} />
<Route path="/page2" component={page2} />
</div>
</div>
<Footer />
</div>
</BrowserRouter>
)
}
}
I think I could use a <Redirect> to redirect to the Home component but this seems like a workaround to me, rather than what should actually happen.
What would be a better way of doing this?
I have a simple App component with Links to a User index and a Cache index (for a geocaching app). My Links render fine, and when clicked they change the path in the address bar, but nothing changes in the DOM until I refresh the page, at which point the page looks the way it should. What's going on here, and what's the conventional way of dealing with it? I am using Redux as well, if that makes any difference. The following is all of the JSX returned by my App component:
<div>
<nav>
<Link to="/caches">Caches</Link>
<Link to="/users">Users</Link>
</nav>
<div>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/users" render={() => <div><UserList users={this.props.users}/></div>}/>
<Route path="/caches" component={CacheList}/>
</Switch>
</div>
</div>
Its a common issue with react-router-4.
use {pure: false} in react-redux connect or use withRouter HOC.
React router 4 does not update view on link, but does on refresh
React-router-dom / ReactJS beginner in general here.
I've got some working router code that I think can be slightly cleaned up, but attempts at doing so have failed thus far. There are certainly some gaps in my knowledge in this area. I've paged through the similar questions which has helped me expand my understanding, but I haven't successfully connected the dots at this point.
The following code seems to work fine, but I am irked by the repeated "/admin" prefix for all the admin routes.
<BrowserRouter>
<div>
<div className="nav-bar">
<ul>
<li><Link to="/admin">Home</Link></li>
<li><Link to="/admin/content">Content</Link></li>
...
</ul>
</div>
<div className="nav-content">
<Route exact path="/admin" component={AdminHome}/>
<Route path="/admin/content" component={AdminContent}/>
...
</div>
</div>
</BrowserRouter>
However, moving the "nested" routes to sub-route elements doesn't work. The JavaScript console spits out the error message "Warning: You should not use and in the same route; will be ignored."
<Route exact path="/admin" component={AdminHome}>
<Route path="/content" component={AdminContent}/>
...
</Route>
Any suggestions would be greatly appreciated. I've read through a number of SO answers, and found some options in which, for example, I could use <Route path="/admin/:whatever" render={() => (...)}/>, but at this time it doesn't seem like the right path to go down.
The reason for this being, I will ultimately need route parameters further down the tree, e.g. for a URI along the lines of /admin/content/:content_type/:identifier, and ideally my AdminContent component would be agnostic about its parent route match.
Please feel free also to let me know if I'm way off base, and if there is any documentation you believe would show me the light I would love to read it.
Cheers and thanks again!
Thanks to Christopher above for providing a link to some good documentation.
As per the documentation linked, the following changes are now up and running:
{/* top-level route declaration */}
<div className="nav-content">
{/* note the removal of the exact property here */}
<Route path="/admin" component={AdminRoutes}/>
</div>
{/* "sub-routes" (possible poor nomenclature) */}
const AdminRoutes = ({ match }) => (
<div>
{/* note the addition of the exact property here */}
<Route exact path={match.url} component={AdminHome}/>
<Route path={match.url + "/content"} component={AdminContent}/>
<Route path={match.url + "/data-store"} component={AdminDataStore}/>
<Route path={match.url + "/search"} component={AdminSearch}/>
<Route path={match.url + "/communicate"} component={AdminCommunicate}/>
<Route path={match.url + "/promote"} component={AdminPromote}/>
<Route path={match.url + "/measure"} component={AdminMeasure}/>
<Route path={match.url + "/experimental"} component={AdminExperimental}/>
</div>
)
To expand a bit further: in all the examples I've seen so far using nested routes and the inbound "match" parameter, they have been implemented as above, i.e. const X = ({match}) => (...).
But it is possible, and potentially useful, to define a true React.Component subclass, in which the param match is still available via this.props.
class Content extends React.Component {
// usage example
render() {
// `match` is available via inbound props
console.log(this.props.match);
return (
<p>Match is {this.props.match.url}</p>
)
}
}
I'd like to re-iterate at this point that I am a ReactJS beginner... Please do let me know if I'm doing something stupid :)