Develop Reference

After adding framer-motion, routing not works but link change

I added framer motion to my project, because i want to make some animations between pages, but now i've been staying all the time at the home page. I will be grateful for any help. Here's my code:
class App extends Component {
//(...)
location = () => {
useLocation();
}
//(...)
<Router>
<nav>
{!this.state.setIsAuth ? (
<>
<Link to="/">Home</Link>
<Link to="/contact">Contact</Link>
<Link to="/login"> Login </Link>
</>
) : (
<>
<Link to="/news"> News </Link>
<Link to="/createpost"> Create Post </Link>
<Link to="/calendar"> Calendar </Link>
<a href="/" onClick={this.signUserOut}> Log Out</a>
</>)}
</nav>
<AnimatePresence>
<Routes location={this.location} key={this.location.pathname}>
<Route exact path="/" element={<Home />} />
<Route path="/news" element={<News />} />
<Route path="/login" element={<Login setIsAuth={this.signIn} />} />
<Route path="/contact" element={<Contact />} />
<Route path="/createpost" element={<CreatePost setIsAuth={this.signIn} />} />
<Route path="/calendar" element={<Calendar />} />
</Routes>
</AnimatePresence>
</Router>
and Home.js to show you how structures of my pages look like
class Home extends Component {
render() {
return (
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
<header className="header">
<div className="header__text-box">
<h1 className="heading__text-box">
<span className="heading-primary--main">TeamWork</span>
<span className="heading-primary--sub">THE WAY TO SUCCESS</span>
</h1>
Take your opportunity
</div>
</header>
</motion.div>
)
}
}

only one child route displaying in react? displays component for a different route instead of its own

When the user goes to the url for "/films/:title" it displays MovieDetailContainer which is the component for the path above it and doesnt display its own component. When I flip around the order of the urls the reverse happens. Why is this? I assume its a nesting error but I cant seem to figure it out.
here is code for the routes and the code for the full App/js is below just incase.
<div className="container mt-3">
<Switch>
<Route exact path={["/", "/home"]} component={Home} />
<Route exact path="/login" component={Login} />
<Route exact path="/register" component={Register} />
<Route exact path="/profile" component={Profile} />
**<Route exact path="/films/:id" children={<MovieDetailContainer/>}/>
<Route exact path="/films/:title" children={<MovieListComponent/>}/>**
<Route path="/user" component={BoardUser} />
<Route path="/creator" component={BoardCreator} />
<Route path="/admin" component={BoardAdmin} />
</Switch>
</div>
import "bootstrap/dist/css/bootstrap.min.css";
import React, { useEffect, useState } from "react";
import { Link, Route, Switch } from "react-router-dom";
import styled from "styled-components";
import { useLocation } from 'react-router-dom';
// components
import Search from './components/search/Search'
import "./App.css";
// import AuthVerify from "./common/auth-verify";
import EventBus from "./common/EventBus";
import BoardAdmin from "./components/board-admin.component";
import BoardCreator from "./components/board-creator.component";
import BoardUser from "./components/board-user.component";
import Home from "./components/home.component";
import Login from "./components/login.component";
import MovieListComponent from "./components/films/movie-list.component";
import Profile from "./components/profile.component";
import Register from "./components/register.component";
import AuthService from "./services/auth.service";
import MovieInfoComponent from "./components/films/movie-info.component";
import MovieItem from "./components/films/movie-item.component";
import MovieDetailContainer from "./components/films/movie-detail-container.component"
const MovieListContainer = styled.div`
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 30px;
gap: 25px;
justify-content: space-evenly; ;
`;
const App = () => {
const [showCreatorBoard, setShowCreatorBoard] = useState(false);
const [showAdminBoard, setShowAdminBoard] = useState(false);
const [currentUser, setCurrentUser] = useState(undefined);
const [locationState, setLocationState] = useState('')
const location = useLocation();
useEffect(() => {
const user = AuthService.getCurrentUser();
setLocationState(location.pathname)
if (user) {
setCurrentUser(user);
setShowAdminBoard(user.roles.includes("ROLE_MODERATOR"));
setShowAdminBoard(user.roles.includes("ROLE_ADMIN"));
}
EventBus.on("logout", () => {
this.logOut();
});
return () => {
EventBus.remove("logout");
};
}, []);
const logOut = () => {
AuthService.logout();
setShowCreatorBoard(false);
setShowAdminBoard(false);
setCurrentUser(undefined);
};
return (
<div>
<nav className="navbar navbar-expand navbar-dark bg-dark">
<Link to={"/"} className="navbar-brand">
Movie App
</Link>
<div className="navbar-nav mr-auto">
<li className="nav-item">
<Link to={"/home"} className="nav-link">
Home
</Link>
</li>
{showCreatorBoard && (
<li className="nav-item">
<Link to={"/mod"} className="nav-link">
Moderator Board
</Link>
</li>
)}
{showAdminBoard && (
<li className="nav-item">
<Link to={"/admin"} className="nav-link">
Admin Board
</Link>
</li>
)}
{currentUser && (
<li className="nav-item">
<Link to={"/user"} className="nav-link">
User
</Link>
</li>
)}
</div>
{/* passing a callback function to the Search component which will return
the result returned from the api. Keeping the movie list state in app.js to map the movies here */}
{locationState=='/register'||locationState=='/login'?null:<Search/>}
{currentUser ? (
<div className="navbar-nav ml-auto">
<li className="nav-item">
<Link to={"/profile"} className="nav-link">
{currentUser.username}
</Link>
</li>
<li className="nav-item">
<a href="/login" className="nav-link" onClick={logOut}>
LogOut
</a>
</li>
</div>
) : (
<div className="navbar-nav ml-auto">
<li className="nav-item">
<Link to={"/login"} className="nav-link">
Login
</Link>
</li>
<li className="nav-item">
<Link to={"/register"} className="nav-link">
Sign Up
</Link>
</li>
</div>
)}
</nav>
<div className="container mt-3">
<Switch>
<Route exact path={["/", "/home"]} component={Home} />
<Route exact path="/login" component={Login} />
<Route exact path="/register" component={Register} />
<Route exact path="/profile" component={Profile} />
<Route exact path="/films/:id" children={<MovieDetailContainer/>}/>
<Route exact path="/films/:title" children={<MovieListComponent/>}/>
<Route path="/user" component={BoardUser} />
<Route path="/creator" component={BoardCreator} />
<Route path="/admin" component={BoardAdmin} />
</Switch>
</div>
{/* {selectedMovie && <MovieInfoComponent selectedMovie={selectedMovie} />} */}
{/*<AuthVerify logOut={this.logOut}/> */}
</div>
);
};
export default App;

The two paths "/films/:id" and "/films/:title" have the same specificity, so the one rendered first will be the one that is matched and rendered by the Switch component.
To resolve you need add something to differentiate them. I suggest a differentiating sub-path.
Example:
<div className="container mt-3">
<Switch>
<Route path="/login" component={Login} />
<Route path="/register" component={Register} />
<Route path="/profile" component={Profile} />
<Route path="/films/:title/:id" component={MovieDetailContainer}/>
<Route path="/films/:title" component={MovieListComponent}/>
<Route path="/user" component={BoardUser} />
<Route path="/creator" component={BoardCreator} />
<Route path="/admin" component={BoardAdmin} />
<Route path={["/", "/home"]} component={Home} />
</Switch>
</div>

State is getting reset when changing route

I have a Navbar component in my react app. I manage the admin state within the Navbar component. When I'm already on the Lag route and tries to route to Medlemar the admin part of the navbar disappears. This is because the admin state is getting reset when changing route. How can I prevent this?
Navbar component:
function Navbar({ data }) {
const [user, setUser] = useState(null)
const [admin, setAdmin] = useState(false)
const [passedData, setData] = useState(undefined)
useEffect(() => {
firebase.auth().onAuthStateChanged((user) => {
setUser(user)
})
if (passedData) {
console.log(passedData)
} else {
setData(data)
}
if (user) {
if(passedData !== undefined) {
firebase.firestore().collection('teams').doc(passedData.teamID).collection('members').doc(user.uid).get().then((snapshot) => {
const administrator = snapshot.get('role')
if (administrator === 'admin') {
setAdmin(true)
} else {
setAdmin(false)
}
})
}
}
}, [user])
return (
<nav className='navbar'>
<ul className='nav-menu-items'>
<li className="nav-text">
<Link to="/">
<AiIcons.AiFillDashboard size="1.4em" className="icon" />
<span>Dashboard</span>
</Link>
</li>
<li className="nav-text">
<Link to="/lag">
<AiIcons.AiOutlineTeam size="1.4em" className="icon" />
<span>Lag</span>
</Link>
</li>
<li className="nav-text">
<Link to="/profil">
<BsIcons.BsPerson size="1.4em" className="icon" />
<span>Profil</span>
</Link>
</li>
<li className="nav-text">
<Link to="/betaling">
<GiIcons.GiPayMoney size="1.4em" className="icon" />
<span>Betaling</span>
</Link>
</li>
</ul>
{admin ?
<>
<span className="admin-text">Admin</span>
<div className="navbar-divider"></div>
<ul className="nav-menu-items">
<li className="nav-text">
<Link to={{
pathname: `/lag/${data.teamID}/admin/medlemar`,
state: {
passedData: data,
}
}}>
<BsIcons.BsPeopleFill className="icon" size="1.4em" />
<span>Medlemar</span>
</Link>
</li>
</ul>
</>
:
null
}
</nav>
)
}
App.js
function App() {
return (
<>
<Router>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/logg-inn" component={Login} />
<Route path="/lag/:id" exact component={Team} />
<Route path="/profil" component={Profile} />
<Route path="/registrer-deg" component={Signup} />
<Route path="/lag" exact component={Teams} />
<Route path="/lag/:id/innstillingar" exact component={TeamSettings} />
<Route path="/lag/:id/betaling" exact component={Payment} />
<Route path="/lag/:id/arrangement" exact component={Events} />
<Route path="/lag/:id/admin/medlemar" component={Members} />
</Switch>
</Router>
</>
);
}

If you want to persist state inbetween the routes with your Navbar then you should use it as a wrapper component and wrap /lag routes with this.
Generaly it would be better to use React Context or any other state managing library to avoid future problems, but the solution I provided should be working.
Your Navbar component could take children(for wrapping purposes) and look like this per say:
function Navbar({ data, children }) {
const [user, setUser] = useState(null);
const [admin, setAdmin] = useState(false);
const [passedData, setData] = useState(undefined);
useEffect(() => {
firebase.auth().onAuthStateChanged((user) => {
setUser(user);
});
if (passedData) {
console.log(passedData);
} else {
setData(data);
}
if (user) {
if (passedData !== undefined) {
firebase
.firestore()
.collection('teams')
.doc(passedData.teamID)
.collection('members')
.doc(user.uid)
.get()
.then((snapshot) => {
const administrator = snapshot.get('role');
if (administrator === 'admin') {
setAdmin(true);
} else {
setAdmin(false);
}
});
}
}
}, [user]);
return (
<nav className="navbar">
<ul className="nav-menu-items">
<li className="nav-text">
<Link to="/">
<AiIcons.AiFillDashboard
size="1.4em"
className="icon"
/>
<span>Dashboard</span>
</Link>
</li>
<li className="nav-text">
<Link to="/lag">
<AiIcons.AiOutlineTeam size="1.4em" className="icon" />
<span>Lag</span>
</Link>
</li>
<li className="nav-text">
<Link to="/profil">
<BsIcons.BsPerson size="1.4em" className="icon" />
<span>Profil</span>
</Link>
</li>
<li className="nav-text">
<Link to="/betaling">
<GiIcons.GiPayMoney size="1.4em" className="icon" />
<span>Betaling</span>
</Link>
</li>
</ul>
{admin ? (
<>
<span className="admin-text">Admin</span>
<div className="navbar-divider"></div>
<ul className="nav-menu-items">
<li className="nav-text">
<Link
to={{
pathname: `/lag/${data.teamID}/admin/medlemar`,
state: {
passedData: data,
},
}}
>
<BsIcons.BsPeopleFill
className="icon"
size="1.4em"
/>
<span>Medlemar</span>
</Link>
</li>
</ul>
</>
) : null}
{children}
</nav>
);
}
and then your App would be looking something like this:
function App() {
return (
<>
<Router>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/logg-inn" component={Login} />
<Route path="/lag/:id" exact component={Team} />
<Route path="/profil" component={Profile} />
<Route path="/registrer-deg" component={Signup} />
<Navbar>
<Route path="/lag" exact component={Teams} />
<Route path="/lag/:id/innstillingar" exact component={TeamSettings} />
<Route path="/lag/:id/betaling" exact component={Payment} />
<Route path="/lag/:id/arrangement" exact component={Events} />
<Route path="/lag/:id/admin/medlemar" component={Members} />
</Navbar>
</Switch>
</Router>
</>
);
}

How to create a nested router with parameters (React)

I need to change component with react-router-dom, but i cannot do it.
I have page with parameter ex:12kb3v124j38727kguby
I go to /channel/12kb3v124j38727kguby => show channel page (account tab)
I need to change account tab the tab to string/number/boolean tab using Link in Navigator
How to solve this?
App.js
function App() {
return (
<div className="App">
<Router>
<Header />
<Switch>
<Route path="/" exact component={LandingPage} />
<Route path="/start" exact component={GetStarted} />
<Route path="/start/auth" exact component={Auth}/>
<Route path="/start/auth/signup" exact component={SignUp}/>
<Route path="/start/auth/signin" exact component={SignIn}/>
<Route path="/account" exact component={Account} />
<Route path="/account/new" exact component={CreateChannel} />
<Route path="/channel/:channel_id" exact component={Channel} />
<Route path="/plans" exact component={Plan} />
<Route path="*" component={NoMatch} />
</Switch>
</Router>
<Loader />
<Toast />
</div>
);
}
export default App;
Channel.jsx
function Channel(props) {
let { path, url } = useRouteMatch();
return (
<main className="relative top-14" style={{height: "300vh"}}>
<Navigator />
<Router>
<Switch>
<Route exact path={path} component={Account} />
<Route exact path={`${path}/string`} component={String} />
<Route exact path={`${path}/number`} component={Number} />
<Route exact path={`${path}/boolean`} component={Boolean} />
<Route exact path={`${path}/docs`} component={Documentation} />
</Switch>
</Router>
</main>
);
}
Navigator.jsx
function Navigator(props) {
let { url } = useRouteMatch();
return (
<div className="top-14 w-full text-white bg-purple-400">
<ul className="flex overflow-x-auto">
<li className="px-4 py-6 text-lg">
<Link to={`${url}`}>Account</Link>
</li>
<li className="px-4 py-6 text-lg">
<Link to={`${url}/string`}>String</Link>
</li>
<li className="px-4 py-6 text-lg">
<Link to={`${url}/number`}>Number</Link>
</li>
<li className="px-4 py-6 text-lg">
<Link to={`${url}/boolean`}>Boolean</Link>
</li>
<li className="px-4 py-6 text-lg">
<Link to={`${url}/docs`}>Documentation</Link>
</li>
</ul>
</div>
);
}

You need to remove exact prop from your Route component that has nested routes.
Like this:
<Route path="/channel/:channel_id" component={Channel} />

ReactJS Router not navigating to the specified component

I am pretty new to react-router. I created a single page with nav bars that can navigate to the either of two pages. In one of the pages, I have a series of link that should direct to another component. My app component deals with the initial routing
<Router>
<nav className ="nav">
<Link to='/' className="nav__nav-link-logo link"><img src={Logo} className="nav__nav-logo" alt="A figure that depicts school"></img></Link>
<button onClick={this.handleBarClick} className="nav__nav-bar-icon link"><FontAwesomeIcon icon={faBars} /></button>
<div className="nav__text-and-icon" style={{display : this.state.navTextDisplay}}>
<Link to = '/' className="nav__text link"><FontAwesomeIcon icon={faHome} className="icon" /> Home </Link>
<Link to = '/pages/Contact/Contact' className="nav__text link"><FontAwesomeIcon icon={faPhoneAlt} className="icon"/> Contact the Dev</Link>
</div>
</nav>
<Switch>
<Route exact path='/' component = { Home } />
<Route exact path='/' component = { Home } />
<Route path='/pages/Contact' component = { Contact } />
<Route component={NotFoundPage}/>
</Switch>
</Router>
then the home component renders a list of links I want to navigate to another component entirely. PS : this is not about nest routing
my list of links code is
render() {
return (
<Fragment>
{/**
* #param item the indiviual school generated from the API
*/}
{this.state.apiResponse.map((item, index) => {
return (
<Fragment>
<li key={item.schoollid}>
<Link
to="/component/SchoolDetails/SchoolDetails"
className="each-school"
>
<SchoolTemplate item={item} />
</Link>
</li>
<Route
path="/component/SchoolDetails"
render={props => (
<SchoolDetails {...props} details={item} />
)}
// component={SchoolDetails}
/>
</Fragment>
);
})}
</Fragment>
);
But then my routes is linking the individual links to my 404 (not found page)

Try this it worked for me ,
User Navbar React bootstrap plugin for the menu bar navigation ,
npm package: import {Navbar, Nav,NavItem, NavDropdown, MenuItem,Glyphicon, Label} from 'react-bootstrap';
`
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="#/Dashboard">
Dashboard
</NavItem>
<NavDropdown eventKey={3} title="Tickets" id="basic-nav-dropdown">
<MenuItem eventKey={3.1}>
<NavLink exact to={ "/Home"}>Home</NavLink>
</MenuItem>
<MenuItem eventKey={3.2}>
<NavLink exact to={ "/Gallary"}>Gallary</NavLink>
</MenuItem>
</Nav>
</NavDropdown>
</Navbar.Collapse>
<NavDropdown eventKey={3} title="Tickets" id="basic-nav-dropdown">
<MenuItem eventKey={3.1} ><NavLink exact to={"/Home"} >Home</NavLink></MenuItem>
<MenuItem eventKey={3.2}><NavLink exact to={"/Gallary"}>Gallary</NavLink></MenuItem>
</Nav>
npm package:
import {Route, BrowserRouter,NavLink,HashRouter , Switch} from 'react-router-dom';
`

try this.
class APIRoutes extends React.Component {
...
render() {
return (
<Switch>
{this.state.apiResponse.map((item, index) => {
return (
<Fragment>
...
<Route
path="/component/SchoolDetails"
render={props => (
<SchoolDetails {...props} details={item} />
)}
/>
</Fragment>
);
})}
</Switch>
);
}
And the component that have Router
<Router>
...
<Switch>
<APIRoutes />
<Route exact path='/' component={Home}/>
<Route path='/pages/Contact' component={Contact}/>
<Route component={NotFoundPage}/>
</Switch>
</Router>