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>
)
}
}
Related
So i want to access the subcategory Iphones from the Home page . If the user clicks the iphone button they will be directed to the phones page displaying all iphones . Problem is how would i route it ?
export default function Home() {
const { city } = useParams();
console.log(city);
return (
<div className="Home">
<h1> Home </h1>
<Link to={`/${city}/phones`}>
<button> Phones </button>
</Link>
<Link to={`/${city}/${title}`}>
<button> iPhones </button>
</Link>
<Link to={`/${city}/laptops`}>
<button> laptops </button>
</Link>
</div>
);
}
Below is my app page
export default function App() {
return (
<Router>
<div className="App">
<Header />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/:city" element={<Home />} />
<Route path=":city/phones" element={<Phones />} />
<Route path=":city/phones/:title" element={<Productdetails />} />
<Route path=":city/laptops" element={<Laptops />} />
<Route path=":city/laptops/:title" element={<Productdetails />} />
<Route path =":city/:title" element={<Productdetails/>}/>
<Route path="/phones/:title" element={<Productdetails />} />
<Route path="/laptops" element={<Laptops />} />
<Route path="/laptops/:title" element={<Productdetails />} />
<Route path="/:title" element={<Productdetails />} />
</Routes>
</div>
</Router>
);
to make it easy take a look at https://codesandbox.io/s/wandering-mountain-ktcknf?file=/src/screens/Phones.js
I'm not really sure even what part of my code to show because it's such a general error, but everytime I npm start my React webpage it automatically goes from the home page to the authentication dashboard and starts refreshing.
I'm guessing it's a problem with React Router but I'm not really sure about this either?
This is how my App.js App component currently looks, which has the main Route functionality.
const App = () => {
const [auth, setAuth] = useState(false);
useEffect(() => {
localStorage.setItem("user", auth);
}, [auth]);
return (
<div className="landing" style={{zIndex:0, margin:"0px", position:"fixed"}}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
{!auth && (
<Route
path="/auth"
element={
<Auth authenticate={(val) => setAuth(val === 1 ? true : false)} />
}
/>
)}
{auth && (
<>
<Route path="/dashboard" element={<Dashboard />} />
</>
)}
<Route
path="*"
element={<Navigate to={auth ? "/dashboard" : "/auth"} />}
/>
</Routes>
</div>
);
}
And this is how my Home.js Home component file looks like
function Home() {
return (
<div className="main">
<div className="landingImageDiv">
<img src={ligaLogo} alt="uchisvg" className="landingImage" />
<div id="fade" className="linkDiv topMargin5">
<div>
<Link to="/about" className="popupLink">
<span className="hover">[About]</span>
</Link>
</div>
<div>
<Link to="/auth" className="popupLink">
<span className="hover">[Talent Network]</span>
</Link>
</div>
<div>
{/* Format to request access to platform */}
<a href="https://forms.gle/vKzq5M9n56oKKV5DA" className="popupLink">
<span className="hover">[Request RSO Onboarding]</span>
</a>
</div>
</div>
</div>
<div className="landing" id="fade">
<div style={{ zIndex: 5, position: "relative" }}></div>
</div>
</div>
);
}
Change your route definition as follows:
{
!auth ? (
<Route
path="/auth"
element={
<Auth authenticate={(val) => setAuth(val === 1 ? true : false)} />
}
/>
) : (
<>
<Route path="/dashboard" element={<Dashboard />} />
</>
);
}
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} />
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>
I am doing the SPA separate with Login Page, but I was unable to route to the login page, the address bar was changed after clicking the logout button, but it did not render any login page content.
Version:
NPM -> 6.4.1
React-Router -> 4
create-react-app
File: index.js
ReactDOM.render(
<Router>
<Switch>
<Route path="/" component={Main} />
<Route path="/login" component={AuthenticateLoginPage} />
</Switch>
</Router>,
document.getElementById("root")
);
Main -> index.js
const SmartCabinet = () => (
<Switch>
<Route exact path='/smartcabinet' component={SmartCabinetIndexPage} />
<Route path='/smartcabinet/:number' component={SmartCabinetEditPage} />
</Switch>
)
const User = () => (
<Switch>
<Route exact path='/user' component={UserIndexPage} />
<Route path='/user/create' component={UserCreatePage} />
<Route path='/user/:number' component={UserEditPage} />
</Switch>
)
render() {
return (
<div>
<div className="ui menu">
<div className="right menu">
<NavLink className="item" exact to="/login">Log out</NavLink>
</div>
</div>
<Grid columns='equal' relaxed={true}>
<Grid.Column width='2'>
<div className="sidenav">
<ul className="header">
<li><NavLink exact to="/">Home</NavLink></li>
<li><NavLink to="/materialrequest">Material Request</NavLink></li>
<li><NavLink to="/smartcabinet">Smart Cabinet</NavLink></li>
<li><NavLink to="/user">User</NavLink></li>
</ul>
</div>
</Grid.Column>
<Grid.Column>
<div className="mainContent">
<Switch>
<Route exact path="/" component={HomePage} />
<Route path="/materialrequest" component={MaterialRequestIndexPage} />
<Route path="/smartcabinet" component={SmartCabinet} />
<Route path="/user" component={User} />
</Switch>
</div>
</Grid.Column>
</Grid>
</div>
);
}
}