How to apply different styles based on the browser location path name?

javascript get url path
pathname javascript
javascript get current url
window.location.replace not working
javascript redirect
javascript get base url
javascript url
javascript replace page url
const activeStyle = {
  border: '1px solid transparent',
  borderColor: '#e4e6e8', 
  borderBottomColor: '#fff', 
  marginBottom: '-1px',
  cursor: 'default'
}

const notActive = {
  cursor: 'pointer'
}

class LoginSignup extends React.Component {
  render() {
    const pathName = this.props.history.location.pathname;
    return (
        <div style={{ pathName === '/login' ? ...activeStyle : ...notActive  }}>
           <Link to='/login'><span>Log in</span></Link>
         </div>
         <div style={{ pathName === '/signup' ? ...activeStyle : ...notActive  }}>
            <Link to='/signup'><span>Sign up</span></Link>
           </div>
      </div>
    );
  }
}


export default withRouter(LoginSignup);

I want to apply different styles based on the location path name. How to do that? I tried ternary operator inside style attribute but it shows Unexpted token, expected , error.

You will need to write it like so:

<div style={pathName === '/login' ? activeStyle : notActive}>...</div>

If you need to concat some styles, I would do something along the lines:

<div style={pathName === '/login' ? activeStyle : { ...activeStyle, ...notActive}}>...</div>

For readability, maybe rename the activeStyle to defaultStyle.

Location pathname Property, var x = location.pathname;. Try it Yourself » The pathname property sets or returns the pathname of a URL. Browser Support Value, Type, Description. path  How to Use Different CSS Style Sheets For Different Browsers (and How to Hide CSS Code from Older Browsers) by Christopher Heng, thesitewizard.com Update (2017): with the demise of Internet Explorer 6 and 7, and the near extinction of old browsers like Internet Explorer 8 to 10, the techniques described in this article are probably no longer necessary.

  you can try the code like below.

     const pathName = this.props.history.location.pathname;
     let headerlink='';
     if(pathName=='/login'){
       headerlink=<div style={{...activeStyle }}>
               <Link to='/login'><span>Log in</span></Link>
             </div>
     }else{
      headerlink=<div style={{...notActive }}>
                <Link to='/signup'><span>Sign up</span></Link>
               </div>;
    }
    return headerlink;

Get URL and URL Parts in JavaScript, var newURL = window.location.protocol + "//" + window.location.host + "/" + Then access the different parts by the parts of the array, like To put that pathname back together, you can stitch together the array and put the is it possible context path…? i hope its not in browser script Base Url for localhost Now, we will do apply styles CSS for div with attribute 'class' is equivalent to 'block'. Styles for INTERNET EXPLORER (Version > 10 and Microsoft Edge): @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){ . block { background-color: #00FF00;} } Now, test in Internet Explorer:

Your spread operator is incorrect you need to spread it within object. One of the following two approaches will work.

class LoginSignup extends React.Component {
  render() {
    const pathName = this.props.history.location.pathname;
    return (
        <div style={{ pathName === '/login' ? activeStyle : notActive  }}>
           <Link to='/login'><span>Log in</span></Link>
         </div>
         <div style={{ pathName === '/signup' ? activeStyle : notActive  }}>
            <Link to='/signup'><span>Sign up</span></Link>
           </div>
      </div>
    );
  }
}

OR

class LoginSignup extends React.Component {
  render() {
    const pathName = this.props.history.location.pathname;
    return (
        <div style={{ pathName === '/login' ? {...activeStyle} : {...notActive}  }}>
           <Link to='/login'><span>Log in</span></Link>
         </div>
         <div style={{ pathName === '/signup' ? {...activeStyle} : {...notActive}  }}>
            <Link to='/signup'><span>Sign up</span></Link>
           </div>
      </div>
    );
  }
}

FrontPage 2003 All-in-One Desk Reference For Dummies, base. location. Browsers locate hyperlinks using a URL you provide. Typing a complete URL every time most developers use the current Web site and folder as the base location. Type the name you want to use for the anchor and click OK. On the extremely-rare occasion that you get a choice, just install to the default. If there's no default, then /usr/bin should be alright. Programs specify themselves where they install their bits to. Each part of the package needs to go into a different place so it can be found.

Location: replace(), If the provided URL is not valid, a DOMException of the SYNTAX_ERROR type is thrown. Syntax. object.replace(url);. Parameters. url: Is a  I was at first a little stymied by it as I needed to style links on my site that had certain text in the URL. Just a bunch of links to products that I wanted to be styled similar to the product’s brand. For this I needed to style links going to any products that had the brand’s name in the URL.

JavaScript in easy steps, 5th edition: Create functions for the web, location.html location.js A web browser can load a file of any supported MIME type. For example, all PNG image files of the MIME type image/png. in the location.protocol (http:), location.host (domain name), location.pathname (file name),  I have some style rules in a CSS file that I want to be applied or not based on screen resolution. How can I do it? I'm going to minimize all my CSS files into the one on production deployment, but this could be avoided if there are no other solutions than having separate CSS files for different screen resolutions.

Microsoft Windows XP: Comprehensive Concepts and Techniques, , Press WINDOWS+R, type program name, press ENTER Paths Paths are left over you merely need to open a window or, in Explorer, open the folder to access the file. However, you will have to understand and use paths to locate computers on a A path is the means of navigation to a specific location on a computer or  No. The whole purpose of using CSS files is that each file represents particular style. If you want to write scripts, you should use PHP or something like that, CSS is merely a description of a single style. Not sure of a way to do that exactly. We just set the CSS file based on the users browser in codebehind.

Comments
  • Is there some error coming or styles are not getting applied?
  • An error, Unexpected token, expected ,
  • Thanks @janhartmann. I have also another style props how to apply both?
  • Thanks again man. I want to apply like this one <div style={ pathName === '/login' ? {...activeStyle} : {...notActive}, { marginRight: '10px', ...defaultStyle }}>
  • Consider using a className instead of inline styling for better maintainability over time :-)