I was working on a page, when suddenly this error occurred:
Everything works well, however, like I said, it just suddenly appeared.
It probably has to do with my Navbar Component, so I'll leave the code of that + the
If you're wondering why I am importing Navbar like:
import { Navbar, Footer } from "../components"
and not like
import Navbar from "../components/Navbar.tsx"
I am using an index.ts file where each components gets imported and exported, so that I only need to use that one folder for all components.
components/Navbar.tsx
import { Flex, Image, Heading, Link, Icon, Menu, MenuButton, Avatar, MenuList, MenuItem, MenuGroup, MenuDivider, chakra, Hide, useBreakpointValue, useColorModeValue, LightMode } from "#chakra-ui/react";
import { RiHome4Line, RiHome4Fill, RiFileList2Line, RiFileList2Fill, RiUserHeartLine, RiUserHeartFill } from "react-icons/ri";
import { useRouter } from "next/router";
import "#fontsource/montserrat/800.css";
import "#fontsource/rubik/400.css"
const Navbar = () => {
const router = useRouter()
return (
<Flex pos="sticky" top="0" left="0" h="9vh" w="100%" alignItems="center" justifyContent={"space-between"} bgColor="header.800" opacity={"0.85"} px="3" py="2" boxShadow={"lg"}>
{/* Logo */}
<Flex flexDir="row" alignItems={"center"} w="33%">
<Image src="favicon.ico" draggable="false" boxSize='35px' objectFit='cover' mr="2" />
<Hide below="md">
<Heading color="white"><chakra.span color="brand.400">F</chakra.span>lintch</Heading>
</Hide>
</Flex>
{/* Buttons */}
<Flex h={useBreakpointValue({ base: "80%", md: "75%" })} w={useBreakpointValue({ base: "80%", sm: "70%", md: "50%", lg: "35%" })} flexDir="row" justifyContent={"space-around"} alignItems="center" bgColor="header.700" rounded="4xl" pt="2">
<Link href='/'>
<Icon color="white" as={router.pathname === "/" ? RiHome4Fill : RiHome4Line} w="160%" h="100%" focusable="false" />
</Link>
<Link href="/explore">
<Icon color="white" as={router.pathname === "/explore" ? RiFileList2Fill : RiFileList2Line} w="160%" h="100%" focusable="false" />
</Link>
<Link href="/feed">
<Icon color="white" as={router.pathname === "/feed" ? RiUserHeartFill : RiUserHeartLine} w="160%" h="100%" focusable="false" />
</Link>
</Flex>
{/* User Avatar */}
<Flex w="33%" justifyContent={"flex-end"}>
<Menu isLazy>
<MenuButton>
<Avatar size="md" src='koala.png' />
</MenuButton>
<MenuList>
<MenuGroup title="Profile" fontFamily={"Montserrat"}>
<MenuItem><Link href="/profile">View Profile</Link></MenuItem>
<MenuItem><Link href="/settings">Settings</Link></MenuItem>
</MenuGroup>
<MenuDivider />
<MenuGroup title="Streaming" fontFamily={"Montserrat"}>
<MenuItem><Link href="/stream">Start streaming</Link></MenuItem>
<MenuItem><Link href="/profile">Flintch Ads</Link></MenuItem>
</MenuGroup>
{/* Add menu group with options only visible to Mods++ */}
<MenuDivider />
<MenuItem color="red.400"><Link href="/log-out">Log out</Link></MenuItem>
</MenuList>
</Menu>
</Flex>
</Flex>
)
}
export default Navbar;
pages/about-us.tsx
import { Box, Heading, Flex, Icon, Text, VStack, chakra, UnorderedList, ListItem } from "#chakra-ui/react";
import { RiFile2Line, RiMoneyDollarBoxLine, RiLightbulbLine, RiHandCoinLine, RiAwardLine } from 'react-icons/ri';
import { Footer, Navbar } from '../components';
import "#fontsource/montserrat/800.css";
import "#fontsource/montserrat/600.css";
import "#fontsource/montserrat/500.css";
export default function About() {
return (
<Flex flexDir="column" justifyContent={"flex-start"} alignItems={"center"} w="100vw" h="100vh">
<Navbar />
<Heading mt="4">About us!</Heading>
<VStack spacing="30" w="90%">
<Box border="2px" rounded={"xl"} borderColor="gray.700" mt="6" p="4" w="80%">
<Flex flexDir={"row"} justify="flex-start" align="center">
<Icon as={RiFile2Line} w="12" h="12" color="brand.400" mr="2" />
<Heading fontSize={"3xl"} fontWeight="semibold">What is Flintch?</Heading>
</Flex>
<Text mt="3">
Flintch is a <chakra.span color="brand.300">live-streaming platform</chakra.span> for gamers.
<chakra.br />
Flintch is an open company with <chakra.span color="brand.300">unambiguous rules</chakra.span> and terms of service, putting the <chakra.span color="brand.300">consumer first</chakra.span> and not the money.</Text>
</Box>
<Box border="2px" rounded={"xl"} borderColor="gray.700" mt="6" p="4" w="80%">
<Flex flexDir={"row"} justify="flex-start" align="center">
<Icon as={RiLightbulbLine} w="12" h="12" color="brand.400" mr="2" />
<Heading fontSize={"3xl"} fontWeight="semibold">Why was Flintch created?</Heading>
</Flex>
<Text mt="3">
We made Flintch.tv to give streamers an <chakra.span color="brand.300">option to make money</chakra.span> and to have an actual human support team, not just stupid robots or biased moderators.
</Text>
</Box>
<Box border="2px" rounded={"xl"} borderColor="gray.700" mt="6" p="4" w="80%">
<Flex flexDir={"row"} justify="flex-start" align="center">
<Icon as={RiAwardLine} w="12" h="12" color="brand.400" mr="2" />
<Heading fontSize={"3xl"} fontWeight="semibold">What are badges?</Heading>
</Flex>
<Text mt="3">
The Flintch custom ad supplier would be called <chakra.span color="brand.300">Flintch Ads</chakra.span>.
<chakra.br />
This will make it possible for businesses and potentially even streamers to advertise their own goods or websites.
</Text>
</Box>
{/* Profit section */}
<Box border="2px" rounded={"xl"} borderColor="gray.700" mt="6" p="4" w="80%">
<Flex flexDir={"row"} justify="flex-start" align="center">
<Icon as={RiMoneyDollarBoxLine} w="12" h="12" color="brand.400" mr="2" />
<Heading fontSize={"3xl"} fontWeight="semibold">How can your company make money?</Heading>
</Flex>
<Text mt="3">
The Flintch custom ad supplier would be called <chakra.span color="brand.300">Flintch Ads</chakra.span>.
<chakra.br />
This will make it possible for businesses and potentially even streamers to advertise their own goods or websites.
</Text>
</Box>
<Box border="2px" rounded={"xl"} borderColor="gray.700" mt="6" p="4" w="80%">
<Flex flexDir={"row"} justify="flex-start" align="center">
<Icon as={RiHandCoinLine} w="12" h="12" color="brand.400" mr="2" />
<Heading fontSize={"3xl"} fontWeight="semibold">What do paysplits look like?</Heading>
</Flex>
<Text mt="3">
A small percentage of donations will also be recieved by us, however not every donation amount equals the same split.
<chakra.br />
<chakra.br />
Examples:
<UnorderedList>
<ListItem>If a donation is below $1, we take 35%.</ListItem>
<ListItem>Someone donates $1 {'->'} 25% of this go to us.</ListItem>
<ListItem>Someone donates $5 {'->'} 15% of this go to us.</ListItem>
<ListItem>Someone donates $10 {'->'} 10% of this go to us.</ListItem>
<ListItem>Someone donates $15 {'->'} 8% of this go to us.</ListItem>
<ListItem>If a donation is above $30, we take 2%.</ListItem>
</UnorderedList>
</Text>
</Box>
</VStack>
<Footer />
</Flex>
)
}
Surprisingly, when I remove the content from the about-us page, except the Navbar and Footer, the page doesn't throw an error.
Any help would be appreciated!
This question already has answers here:
How do I render components with different layouts/elements using react-router-dom v6
(2 answers)
Closed 10 months ago.
As you can see I want to hide menu bar and footer when notfound page is rendering .I tried all the other solutions but didn't happen to work in my Scenario. I wanted the Navbar and footer hide in 3 notfound Page. I use react-router version 6 and fuctional App component. Please Help me figure out this solution
`
<Menubar />
<Routes>
<Route path='/' element={<Home />} />
<Route path='/home' element={<Home />} />
<Route path='/inventory/:id' element={
<PrivateRoute>
<Inventory />
</PrivateRoute>
} />
<Route path='/manageinventory' element={
<PrivateRoute>
<ManageInventory />
</PrivateRoute>
} />
<Route path='/addinventory' element={
<PrivateRoute>
<AddInventory />
</PrivateRoute>
} />
<Route path='/myitems' element={
<PrivateRoute>
<MyItems />
</PrivateRoute>
} />
<Route path='/login' element={<Login />} />
<Route path='/register' element={<Register />} />
<Route path='/blogs' element={<Blog />} />
<Route path='*' element={<NotFound />} />
</Routes>
<Footer />
Use a master page that contains Navbar and Footer and each Created component will contains a master page except the notFound Page
{/* Layout component */}
import React from "react";
import Sidebar from "./Navbar ";
import Sidebar from "./Footer ";
const Layout = ({ children}) => {
return (
<>
<Navbar />
<main>{children}</main>
<Footer />
</>
);
};
export default Layout;
and for any new component, you will call the master page
{/* For Home, Inventory, ... components */}
import React from "react";
import Layout from "../components/Layout";
const Home = () => {
return (
<Layout>
{/* your code jsx here */}
</Layout>
);
};
export default DahsboardScreen;
import React, { useState } from 'react';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import { NavigationContainer } from '#react-navigation/native';
. . . .
all the screens were imported...
Log out of the profile screen and then navigate to the login screen.
my navigation file is...
const BottomTab = createBottomTabNavigator();
const Stack = createNativeStackNavigator()
export default Navigate = () => {
function Editable() {
return (
<NavigationContainer independent={true}>
<Stack.Navigator screenOptions={{ headerShown: false }} >
<Stack.Screen name="ProfileScreen" component={ProfileScreen} />
<Stack.Screen name='Edit_profile' component={Edit_profile} />
<Stack.Screen name='MyComplaints' component={MyComplaints} />
</Stack.Navigator>
</NavigationContainer>
)
}
function HomeScreen() {
return (
<NavigationContainer independent={true}>
<BottomTab.Navigator tabBarOptions={{ keyboardHidesTabBar: true }}>
<BottomTab.Screen name="Home" component={Home}/>
<BottomTab.Screen name="Home2" component={Home2} />
<BottomTab.Screen name="Editable" component={Editable}/>
<BottomTab.Screen name="Feedback" component={Feedback}/>
</BottomTab.Navigator>
</NavigationContainer>
)
};
return (
<NavigationContainer independent={true}>
<Stack.Navigator screenOptions={{ headerShown: false }}
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="App" component={App} />
<Stack.Screen name="HomeScreen" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
)
};
I want to navigate from ProfileScreen to Login screen how can I do that?
Navigating between multiple navigation containers is impossible as they are independent from each other. You need to remove the nested NavigationContainer components.
There should be only one NavigationContainer at the root of your app.
https://reactnavigation.org/docs/getting-started/#wrapping-your-app-in-navigationcontainer
I'm using react and react-router-dom for my website. I have two versions of the site, one that it for beta users and the other that is for my customers. When the site is loaded on the beta server with process.env.IS_BETA === "true" I only want users to be able to access the login and forgot my password pages. I don't want them to access the registration page or the front page. I tried the following but it didn't work because I think the process.env is already read when it's built.
export const App = () => (
<BrowserRouter>
<div className="d-flex flex-column height-100vh">
<Navbar />
{process.env.IS_BETA === "true" && (
<Switch>
<Route path="/PrivacyPolicy" component={PrivacyPolicy} />
<Route path="/TermsOfUse" component={TermsOfUse} />
<Route path="/Login" component={Login} />
<Route path="/Forgot" component={Forgot} />
<Route path="/Reset" component={Reset} />
<Redirect to="/Login" />
</Switch>
)}
{process.env.IS_BETA !== "true" && (
<Switch>
<Route exact path="/" component={Home} />
<Route path="/PrivacyPolicy" component={PrivacyPolicy} />
<Route path="/TermsOfUse" component={TermsOfUse} />
<Route path="/Register" component={Register} />
<Route path="/Login" component={Login} />
<Route path="/Forgot" component={Forgot} />
<Route path="/Reset" component={Reset} />
<Redirect to="/" />
</Switch>
)}
<Footer />
</div>
</BrowserRouter>
);
How do I redirect or not load some pages on the beta server?
process.env is not available direclty in your Javascript code, but it will be available to Webpack at compile time. Webpack supports defining globals within your Javascript environment with the DefinePlugin, so by adding a new plugin definition as follows:
plugins: [
new webpack.DefinePlugin({
__IS_BETA__: process.env.IS_BETA === "true",
}),
],
in your Webpack config, __IS_BETA__ will be replaced throughout your Javascript code based on whether IS_BETA environment variable was set to true when compiling your app.
You can then reference it in your React code as such:
export const App = () => (
<BrowserRouter>
<div className="d-flex flex-column height-100vh">
<Navbar />
{__IS_BETA__ && (
<Switch>
<Route path="/PrivacyPolicy" component={PrivacyPolicy} />
<Route path="/TermsOfUse" component={TermsOfUse} />
<Route path="/Login" component={Login} />
<Route path="/Forgot" component={Forgot} />
<Route path="/Reset" component={Reset} />
<Redirect to="/Login" />
</Switch>
)}
{!__IS_BETA__ && (
<Switch>
<Route exact path="/" component={Home} />
<Route path="/PrivacyPolicy" component={PrivacyPolicy} />
<Route path="/TermsOfUse" component={TermsOfUse} />
<Route path="/Register" component={Register} />
<Route path="/Login" component={Login} />
<Route path="/Forgot" component={Forgot} />
<Route path="/Reset" component={Reset} />
<Redirect to="/" />
</Switch>
)}
<Footer />
</div>
</BrowserRouter>
);
I am trying to make a 404 route with react-router and it doesn't work.
I tried <Route path="*" component={PageNotFound} /> and <Route component={PageNotFound} /> and wrapped all my routes with <Switch></Switch.
My guess is that it doesn't work because I have two <Switch /> components nested inside each other.
App.js:
class App extends Component {
render() {
return (
<Provider store={store}>
<Router>
<div className="App">
<Header />
<Switch>
<Route exact path="/" component={Landing} />
<Route exact path="/login" component={Login} />
<Route exact path="/register" component={Register} />
<Route exact path="/profiles" component={Profiles} />
<Route exact path="/profile/:id" component={Profile} />
<Switch>
<PrivateRoute exact path="/dashboard" component={Dashboard} />
</Switch>
<Switch>
<PrivateRoute exact path="/posts" component={Posts} />
</Switch>
<Switch>
<PrivateRoute exact path="/post/:id" component={Post} />
</Switch>
<Switch>
<PrivateRoute
exact
path="/create-profile"
component={CreateProfile}
/>
</Switch>
<Switch>
<PrivateRoute
exact
path="/edit-profile"
component={EditProfile}
/>
</Switch>
<Route path="*" component={PageNotFound} />
</Switch>
<Footer />
</div>
</Router>
</Provider>
);
}
}
PrivateRoute.js:
const PrivateRoute = ({ component: Component, auth, ...rest }) => (
<Route
{...rest}
render={props =>
auth.isAuthenticated === true ? (
<Component {...props} />
) : (
<Redirect to="/login" />
)
}
/>
);
I also tried putting the 404 route just above the first <PrivateRoute />. And it works for the non-private routes but I want it to work in all routes.
The example above also messes up the <PrivateRoute exact path="/posts" component={Posts} /> route.
You can view the website at https://floating-waters-33077.herokuapp.com
I think the issue is the number of Switch blocks you have. You should ideally only have one.
Since each route is exact you can condense your Switch component children to
class App extends Component {
render() {
return (
<Provider store={store}>
<Router>
<div className="App">
<Header />
<Switch>
<Route exact path="/" component={Landing} />
<Route exact path="/login" component={Login} />
<Route exact path="/register" component={Register} />
<Route exact path="/profiles" component={Profiles} />
<Route exact path="/profile/:id" component={Profile} />
<PrivateRoute exact path="/dashboard" component={Dashboard} />
<PrivateRoute exact path="/posts" component={Posts} />
<PrivateRoute exact path="/post/:id" component={Post} />
<PrivateRoute
exact
path="/create-profile"
component={CreateProfile}
/>
<PrivateRoute
exact
path="/edit-profile"
component={EditProfile}
/>
<Route component={PageNotFound} />
</Switch>
<Footer />
</div>
</Router>
</Provider>
);
}
}
This will allow for the 404 page to be a catch-all if none of the routes match in the overall Switch block.