Keredari - Developer's Blog

Protected routes are very important for any web application. Below are the code to create authenticated routes that only certain users can access based on their authentication roles. import   React , {  Component  }  from   'react' ; import  {  BrowserRouter   as   Router ,  Route ,  Switch ,  Redirect  }  from   'react-router-dom' ; import   commonService   from   './core/services/commonService' ; import   './App.css' ; import   Loader   from   './views/Loader/Loader' ; // Containers const   FrontEndLayout  =  React . lazy (()  =>   import ( './containers/FrontEndLayout/FrontEndLayout' )); const   UserLayout  =  React . lazy (()  =>   import ( './containers/UserLayout/UserLayout' )); const   loading  = ()  =>   < Loader   /> ; class   App   extends   Component  {    render (){      return  (        < Router >            < React.Suspense   fallback = { loading () } >    

Sometimes we face a problem to display multiline string in separate line instead of online while rendering ReactJs view. Here are the solution: Add a new class in css file .multi-line-break {   white-space: pre-line; } Add css class with you div or p tag render() {   const textString = 'First Line \n Second Line \n Third Line';   return (      <div className="multi-line-break">         {textString}      </div>   ); } You will get output like this: First Line Second Line Third Line