I'm trying to implement the route like facebook. Let me explain how some route works on Facebook, When a user is scrolling through his feed at home page, Url is example.com/ then if user clicked any photo in the feed a modal will appear over the feed and the url will change like example.com/photo/?urlparams. When user click the back button or close button, Modal hides itself and url back to previous home page example.com/ without re-rendering the feed.
What I tried is
<Route path='/' exact render={(props) => <PostLists {...props} scroll={scroll} /> } />
<Route path='/post/:id' render={(props) => <Single {...props} scroll={scroll}/> } />
PostLists component has infinte scroll so may have up to 90+ posts. Each post have Link to Single Component like below
<Link to={`/post/${props.post.slug}`} className={`post-title`}>{pTitle}</Link>
Everthing works fine like normal navigation. But I like to show this Single Component in the Modal over the PostsLits Component, by the same time URL should be changed like example.com/post/url-slug
So I replaced Link in the post's title as
<span onClick={titleClick} className={`post-title`}>{pTitle}</span>
const titleClick = () => {
props.toggle(true) //Modal Toggle
return window.history.pushState(null, null, `/post/${props.post.slug}`)
}
This works like what I expected but I'm using window history not the react's history so I cannot listen to the URL change from browser back button. If I click the back button URL changes to previous example.com/ But I'm unable to hide the Modal.
What I want is Every post can have (example.com/post/slug)seperate page to display their content, But when clicking the post from Home Page it should be displayed as Modal and url should change to their respective post url example.com/post/slug on clicking the back button modal should be hidden and PostLists should be displayed.
Related
Expected
When the user is on the /animals route, when they click the back button on the browser i want to redirect them back to another route instead of the previous route.
What's actually happening:
I am trying to redirect the url when the user clicks the back button on the browser, however i am having trouble with this where it is replacing the current location when the page loads on that route instead of replacing it when the user clicks the back button and it removes the pathname on top of that.
if (window.location.hash === '#/animals') {
return history.pushState({}, '', '/home');
}
I have a website with two pages. When clicking on the nav link, I need the page and the nav link name to change.
I tried this:
const [isClicked, setIsClicked] = useState(false);
const ClickHandler = () => {
setIsClicked(!isClicked);
}
<NavLink to={isClicked ? '/' : '/profile'} onClick={ClickHandler}><NavPage>{isClicked ? 'Home': 'Profile'}</NavPage></NavLink>
but this showed me an error where when going to profile page. The link name and the actual link do not change, only the page changes, it has to be clicked again for everything to be ok.
Another problem when refreshing in the profile page the link name becomes profile again, I want it to be home.
To keep the link between session, the value must be stored in localStorage or cookies, because now it depends on the state.
Maybe it'd be better to pass the target link via props?
I am kinda new to react and I would like to change the url once the user has clicked to open a modal window. There's also some data coming with the modal that I would like to reflect in the url. E.g. "my.app/folders/project-name/"
I tried some solutions with react router but I do not seem to get it just right...
Here is the modal that I wish could update the URL once it's opened.
{modalOpen ? (
<ProjectModal
projectName={target[0].project_name}
organization={target[0].organization}
avatar={target[0].organization_avatar}
client="xy"
selectedImg={target[0].images[0]}
gallery={target[0].images}
onClose={() => setModalOpen(false)}
/>
) : null}
Make sure you have this route mentioned in your Router. Something like this,
<Route path="parent" component="ParentComponent" />
<Route path="parent/modal" component="ParentComponent" />
Then you will have to use the history.push method while setting the variable to open the modal.
history.push('/parent/modal');
Hope my answer helps.
Checkout the docs for more info.
I'm trying to show a message if the user is not logged in. Please Login here (red color) to continue.
In the render method, I need to check and see if the user is already logged in to not show any message.
I also have a login method that directs user to the login page.
I need to show a button to look like a hyperlinked text because I can't call the this.login function in a href. Now there's a big space (because of the button) between "login" and "here". I also need to make "here" red to inform the user that it's clickable.
I tried <div> Please login <a onClick={this.login}>here</a></div> but it "here" looks like a simple text. No link appears. Only the button can add a link and I don't know the reason.
{!this.props.isAuthed && <div> Please login<Button color="inherit" onClick={this.login}>here</Button></div>}
Try this:
<div> Please login <a onClick={this.login} href="#">here</a></div>
The reason is: An a tag without the href attribute is not rendered like a link by browsers. To mitigate that, we add it with some arbitrary value.
On your onClick handler - login in your case - you need to ensure that you prevent the default action - navigating to the relative url # - from happening:
login = e => {
e.preventDefault();
// your login logic
}
I am using ReactJS with Material-UI, which I am both quite new to using.
I have an AppBar component that is used as a main menu/navigation bar. I would like the title of the AppBar component to reflect the page I'm on. So if I press a button that routes the user to /login , I also want to change the title of the AppBar component to "Login". I have accomplished this but there seem to be some side effects so I doubt it's the proper practice.
At the moment, my AppBar component looks like so:
render() {
let MenuOptionsNotLogged = ({}) => (
<div>
<FlatButton
label="Log In"
containerElement={<Link to="/login" />}
secondary
linkButton
onClick={this.switchToLogin}
/>
</div>
);
return (
<div>
<MuiThemeProvider muiTheme={muiTheme}>
<div className="headerDiv">
<AppBar
className="appBar"
showMenuIconButton={this.state.appBarIcon}
title={this.state.appBarTitle}
iconElementRight={<MenuOptionsNotLogged />}
iconElementLeft={<IconButton><BackIcon /></IconButton>}
/>
</div>
</MuiThemeProvider>
</div>
);
In my constructor, I set the default state of the AppBar(the title and icon):
constructor(props, context) {
super(props, context);
this.switchToLogin = this.switchToLogin.bind(this);
this.state = {
appBarTitle: 'Home',
appBarIcon: false
};
}
And then I have a function which changes the title and icon when the user navigates to the Login page:
switchToLogin() {
this.setState({ appBarTitle: 'Log in' });
this.setState({ appBarIcon: true });
}
The problem
This 'works', but it has some problems if the user refreshes or hits the back button on their browser.
E.g. user navigates to /login, title changes to "Login", user refreshes browser. Then the user will be on /login but the title will reset to "Home".
Same problem with the back button. User can navigate to login, press back, and the title will stay as "Login" as opposed to "Home"
I see you have a Link component. My answer assumes you use react-router.
The problem is that your appBarTitle state is not mapped correctly with the current route.
Also when user refresh the browser, the state of components resets.
if you are not using reat-router 3.0, you can get access to the current route through this.context.location.pathname. You will need to read about how to use context here.
Then you can write a helper function to map pathname to the text you want to display: '/login' -> 'Login', '/' -> 'Home'.
Then the title of your AppBar can just be the value returned from the helper function. You no longer need to keep tract of it in the state.
Just to add, not relating to your question, Reactjs is a declarative style of programming, meaning that, 'switchToLogin then display login title' is discouraged. Tell the component what to render rather than how to.