noob question but I wanted to ask if I am creating a react app that has a front-end and back-end interface. How would I add a navbar for each of them. I am thinking of creating a private route for the backend interface and then adding my navbar there, But navbar on App.JS would clash with that. Am I right to think that, if so how can I fix it?
Here is an example:
function Users() {
let location = useLocation();
return (
<div>
<div>
{location.pathname === "/backend-navbar"?
<p>back-end navbar</p> : <p>front-end navar</p>}
</div>
</div>
);
}
Related
I want to implement Server Sider Rending SSR for a NextJS Typescript component. It's possible to do SSR for a page using getServerSideProps but not found any way for non page child components. It works fine under page folder but no luck outside of page components.
Say I have created a component with API under components folder, here getServerSideProps is not working and even SSR also not working. and can't see the content in page view source DOM.
/components/user.tsx
import React from 'react';
import {useEffect,useState} from 'react';
interface User {
id:number;
name: string;
username: string;
email:string;
}
const Users = () => {
const [data,setData]= useState([])
useEffect(()=>{
fetch("https://jsonplaceholder.typicode.com/users").then((result)=>{
result.json().then((resp)=>{
setData(resp);
})
})
},[])
console.log(data)
return (
<div>
<ul>
{data.map((data: User)=>
<li key={data.id}>
<h2>{data.name}</h2>
<h3>{data.username}</h3>
<h4>{data.email}</h4>
</li>
)}
</ul>
</div>
)
}
export default Users
/pages/user.tsx
import React from 'react';
import Users from "../components/Users";
function user() {
return (
<section>
<h1>User - Component</h1>
<main>
<Users />
</main>
</section>
);
};
export default user;
Can you please help how to implement SSR for components which located out side of pages folder?
As it notes in the documentation
getServerSideProps can only be exported from a page. You can’t export it from non-page files.
This rules out getServerSideProps, now for the ask itself
Two options
setup a corresponding pages/component page
Setup a custom server and use the following in next.config.js - This allows routing to be on you without using the pages as the only place things get served from.
module.exports = {
useFileSystemPublicRoutes: false,
}
I am running into a simple issue that doesn't seem to have an answer on quick google search or Tailwind doc.
I am a Vuejs user but I have started learning React. I have opted to use TailwindCSS for testing my React application but I noticed there is some differences of Tailwind usage between Vuejs and React.
In Vue, I can control a child component via the parent component like so:
Parent component:
<template>
<div class="w-screen">
<ChildComponent class="w-1/2 mx-auto" />
</div>
</template>
With the child being able to centre on screen through the above parent component as should in the ChildComponent's class.
However, when I tried to do the same in React like so:
Parent component:
import Homepage from './views/Homepage';
function App() {
return (
<div className='bg-black w-screen'>
<Homepage className="w-1/2 mx-auto"/>
</div>
);
}
export default App;
Nothin happens when I placed the CSS at the Homepage child component from the parent.
I am sure there is a simple answer but I wasn't about to search the doc or use any keywords to find this problem. Anyone got a hint or confirm this is intended in React or have I done something wrong with the installation?
This is less of a Tailwind question and more of a React question. You cannot use className on the Homepage component without passing it as a prop. In your case, Homepage is not expecting any className. So while making your Homepage component you have to provide a prop called 'className' then it will work fine.
Or if you simply use a div in place of Homepage it will work normally. Have a look at this codesandbox link
You need to consider that <Homepage/> is a React component and cannot accept HTMLAttrs just like that.
this example might clear it:
const app = () => {
<div className="bg-black">
<Homepage className="bg-red" />
</div>
}
const homePage = (props) => {
<div className={props.className}>
<h1 className="bg-red">hi</h1>
</div>
}
the className that you pass to <Homepage/> is actually a props rather than Html attribure.
In Vue it's fairly straightforward but in react you need to be explicit and use className in your component
// Creating component
const Button = ({ className, children }) => {
return <button className={`${className} bg-red-500`}>{children}</button>
}
export default Button
// Using component
<Button className="text-white">MyButton</Button>
import Homepage from './views/Homepage';
function App() {
return (
<div className='bg-black w-screen'>
<Homepage className="w-1/2 mx-auto"/>
</div>
);
}
export default App;
views/Homepage
you have to receive props that are going to be passed as className
const homePage = ({className}) => {
<div className={className}>
<h1 className="bg-red">hi</h1>
</div>
}
export default homePage
then export your component
How to hide header component conditionally wise see in my codesandbox
I do not want schedule tab to display header how this possible
Please guide thanks
https://codesandbox.io/s/vvoqvk78
You could wrap your app with withRouter and access the current location from the location prop. This enables you to render the header conditionally:
const App = props => (
<div>
{props.location.pathname !== "/schedule" && <Header />}
<Main />
</div>
);
export default withRouter(App);
Here is a codepen.
Hope this helps. Happy coding.
I have a React+Django app which is a custom video player, and I'm currently working on a related videos / queue at the end of the video. I have it working, if I use a simple window.location.replace with the link to the next video. However, it would be a lot smoother to only reload the video player.
From the many many threads I've read on SO, it seems that this it is possible to re-route my "main" component within a child component in React, but none of the methods have worked for me and I have a slightly different case than everything I've read. If the video playing depends on my URL (or Route), is it even still possible to reload without re-rendering the entire page?
Here's a barebones version of the relevant code:
Index.js:
class Welcome extends React.Component {
render() {
return (
<BrowserRouter>
<App/>
</BrowserRouter>
)
}
}
const element = <Welcome/>;
ReactDOM.render(
element,
document.getElementById('container')
);
App.js:
class App extends React.Component {
render() {
return (
<Row id="app-container" className="h-100 justify-content-center align-items-center">
<Switch>
<Route path='/app/:number' component={Player}/>
</Switch>
</Row>
)
}
}
export default App
Queue.js, Note: this is obviously just the part I'm having trouble with. I have clickable imgs to do the window.location.replace method.
<div>
<Link to='app/1' replace>
Previous Video
</Link>
<div>
The Link actually does change the URL in the way I want, but doesn't reload the App. I've spent a long time trying to implement solutions to this problem from other SO posts, but I'm worried that once I get it, it will end up forcing the whole page to reload anyway. Can anyone tell me if it's possible to JUST re-reroute my app? It's alright if the URL doesn't change, as long as the app is based on the new route.
Thanks in advance
Using react with meteor here, I have main component called App, and it wraps page layout (Header, Sidebar, Right-sidebar).
export default class App extends Component {
render() {
return (
<div>
<nav className="navigation">
<Header />
<Sidebar />
</nav>
<div className="content">
<Subnavbar />
<div className="container">
{this.props.children}
</div>
</div>
<Rightsidebar />
</div>
);
}
};
I'm trying to setup authentication system using Meteor's built in auth system. using "accounts-password" package.
To my knowldge, I need to use createContainer from 'meteor/react-meteor-data' to inject auth params to components.
Similar to this example:
import { createContainer } from 'meteor/react-meteor-data';
import MainPage from '../pages/MainPage.jsx'
export default MainContainer = createContainer(({params}) => {
const currentUser = Meteor.user();
return {
currentUser,
};
}, MainPage);
However in the above example, it only injects the parms to a single component, how can I go about injecting auth info to all components in my app (Header, Sidebars ..etc)
Your help is highly appreciated.
Thank you
If you wrap App in createContainer, then App will have a prop currentUser. It can then be the responsibility of App to pass the currentUser prop to all of your components. If you find yourself passing around currentUser far too much, then you can wrap only the components that need currentUser in createContainer.
In that case you would have HeaderContainer, SidebarContainer, etc, each being wrapped with createContainer.