change order of react router links - javascript

In the context of the DOM how do I change the order of how the links for a react router setup?
See the following example:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import 'bootstrap/dist/css/bootstrap.css';
import Counter from './components/counter';
import Counters from './components/counters';
import ColorPicker from './components/colorpicker';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
ReactDOM.render(
<main className="content-area">
<Router>
<Route path="/counter" component={Counter} />
<Route path="/color-picker" component={ColorPicker} />
<ul>
<li>
<Link to="/">Main Page</Link>
</li>
<li>
<Link to="/counter">Counter</Link>
</li>
<li>
<Link to="/color-picker">Color Picker</Link>
</li>
</ul>
</Router>
</main>,
document.getElementById('root')
);
This is the output:
The links need to be above the outputted component, so:
But I don't know how to figure it out, and there are no helpful answers on stack overflow.
I tried:
ReactDOM.render(
document.getElementById('root'),
<main className="content-area">
<Router>
<Route path="/counter" component={Counter} />
<Route path="/color-picker" component={ColorPicker} />
<ul>
<li>
<Link to="/">Main Page</Link>
</li>
<li>
<Link to="/counter">Counter</Link>
</li>
<li>
<Link to="/color-picker">Color Picker</Link>
</li>
</ul>
</Router>
</main>
);
But everything goes blank with no errors.
I feel like this answer - Using React-Router with a layout page or multiple components per page - could be what I'm looking for but to be honest I don't understand it.
How do I change the order of react router links?

As #azium said in the comments, you need to reorder your html code to put the links before the routes, not reorder the arguments of the ReactDOM.render method.
ReactDOM.render(
<main className="content-area">
<Router>
<ul>
<li>
<Link to="/">Main Page</Link>
</li>
<li>
<Link to="/counter">Counter</Link>
</li>
<li>
<Link to="/color-picker">Color Picker</Link>
</li>
</ul>
<Route path="/counter" component={Counter} />
<Route path="/color-picker" component={ColorPicker} />
</Router>
</main>,
document.getElementById('root')
);

Related

Link not giving any output with 'react-router-dom'

I'm trying to add a NavBar to the app.js file I have in react.
When I load the page the Route files are loading but the Link files set in NavBar aren't appearing.
This is the NavBar page
import React from 'react';
import { Link } from 'react-router-dom';
const NavBar = () => (
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/article">Article</Link>
</li>
<li>
<Link to="/article-list">Article List</Link>
</li>
</ul>
</nav>
)
export default NavBar;
Then below is the app.js file
import Homepage from './Pages/Homepage';
import AboutPage from './Pages/AboutPage';
import ArticlesList from './Pages/ArticlesList';
import ArticlePage from './Pages/ArticlePage';
import NavBar from './NavBar';
import {Routes, Route} from 'react-router-dom';
import './App.css';
function App() {
return (
<Routes>
<div className="App">
<NavBar />
<div id="page-body">
<Route path="/" element={<Homepage />} />
<Route path="/about" element={<AboutPage />}/>
<Route path="/article-list" element={<ArticlesList />} />
<Route path="/article" element={<ArticlePage />} />
</div>
</div>
</Routes>
);
}
export default App;
I am keeping NavBar out of the pages folder
I'm stumped as to what it could be
Just incase the react-router-dom version I have in my package.json file is:
"react-router-dom": "^6.0.0-beta.6",
index.js file:
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router} from "react-router-dom";
import './index.css';
import App from './App';
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById('root')
);
I think your navbar should be outside of your Routes tag in app.js, and then inside your navbar file, wrap everything around a tag.
App.js should look like this:
import Homepage from './Pages/Homepage';
import AboutPage from './Pages/AboutPage';
import ArticlesList from './Pages/ArticlesList';
import ArticlePage from './Pages/ArticlePage';
import NavBar from './NavBar';
import {Routes, Route} from 'react-router-dom';
import './App.css';
function App() {
return (
<div>
<NavBar />
<Routes>
<div className="App">
<div id="page-body">
<Route path="/" element={<Homepage />} />
<Route path="/about" element={<AboutPage />}/>
<Route path="/article-list" element={<ArticlesList />} />
<Route path="/article" element={<ArticlePage />} />
</div>
</div>
</Routes>
</div>
);
}
export default App;
Additionally, your nav component should look something like this:
import React from 'react';
import { Link, Routes } from 'react-router-dom';
const NavBar = () => (
<nav>
<Routes>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/article">Article</Link>
</li>
<li>
<Link to="/article-list">Article List</Link>
</li>
</ul>
</Routes>
</nav>
)
export default NavBar;
You might also be running into a problem with the fact that you are wrapping around your App component with a but i am not 100% sure on this one.

react js not importing css files

React BrowserRouter routes with a parameter are not loading the CSS files, why always not importing CSS files in react js routers, I'm trying to setup a react-router for my first React webapp, it seems to be working except that the css doesn't load
import { Route,Switch } from "react-router-dom";
import Allmeetup from "./pages/Allmeetup";
import Newmeetup from "./pages/Newmeetup";
import Favourite from "./pages/Favourite";
import Mainnavigation from "./Layout/Mainnavigation";
function App() {
return (
<div>
<Mainnavigation/>
<Switch>
<Route path='/' exact>
<Allmeetup/>
</Route>
<Route path='/Newmeetup'>
<Newmeetup/>
</Route>
<Route path='/Favourite'>
<Favourite/>
</Route>
</Switch>
</div>
);
}
export default App;
import { Link } from "react-router-dom";
import {classes} from './Mainnavigation.module.css';
function Mainnavigation()
{
return (
<div className={classes.header}>
<nav>
<ul>
<li>
<Link to='/'> Allmeetup</Link>
</li>
<li>
<Link to='/Newmeetup'> Newmeetup</Link>
</li>
<li>
<Link to='/Favourite'> Favouritepage</Link>
</li>
</ul>
</nav>
</div>
);
}export default Mainnavigation;
just use import './Mainnavigation.module.css' and use the classNames directly instead of className={classes.header}

React page not refreshing automatically when using Router

I've been working on my first React project and used react-router to navigate to different pages. Although I have reached the functionality, I have found that I have to manually refresh the page (using F5) whenever I press the link (for eg. About or Shop in the following code) to load the content.
Here's my Code
App.js
import React from "react";
import Nav from "./Nav";
import Shop from "./Shop";
import About from "./About";
import Home from "./Home";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import "../App.css";
function App() {
return (
<Router>
<div className="App">
<Nav />
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/shop" component={Shop} />
</Switch>
</div>
</Router>
);
}
export default App;
Nav.js
import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";
import "../App.css";
function Nav() {
return (
<nav>
<h3>Adifier</h3>
<ul className="nav-links">
<Router>
<Link to="/about">
<li>About</li>
</Link>
<Link to="/shop">
<li>Shop</li>
</Link>
</Router>
</ul>
</nav>
);
}
export default Nav;
About.js
import React from "react";
function About() {
return (
<div className="App">
<h1>About Page</h1>
</div>
);
}
export default About;
Shop.js
import React from "react";
function Shop() {
return (
<div className="App">
<h1>Shop Page</h1>
</div>
);
}
export default Shop;
Thanks in advance
Remove Router from Nav.js. It has already served its purpose when you defined routes in app.js
<ul className="nav-links">
<Link to="/about">
<li>About</li>
</Link>
<Link to="/shop">
<li>Shop</li>
</Link>
</ul>

Why wouldn't React Router work with <Switch>?

I'm learning React router, tried to build a pretty basic application like this Home.js:
import React from 'react';
import About from '../pages/About';
import { HashRouter as Router, Switch, Route, Link } from "react-router-dom";
const Navbar = () => {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">HOME</Link>
</li>
<li>
<Link to="/about-us">ABOUT US</Link>
</li>
</ul>
</nav>
<Switch>
<Route path="/about-us">
<About />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
)
}
const Home = () => {
return (
<>
<Navbar />
</>
)
}
export default Home;
Then in index.js render Home page:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Home from './pages/Home';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<Home />
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
Problem is, Home wouldn't render in localhost:3000, terminal showed Compiled successfully! but when loading localhost:3000, it just spins forever with nothing rendered. However, if I remove the element it rendered. Folder structure set like this:
src
--pages
----About.js
----Home.js
index.js
Can anyone help?
You've created yourself an infinite loop from what it looks like. Your index.js returns your Home component, which then returns the Navbar, which has a router, which then returns the Home component, which then repeats that cycle over and over again.
This is the approach I would take, which will show the Navbar on both the about and home page, and will only show one of the pages at a time based on the current route.
// Navbar.js
const Navbar = () => {
return (
<nav>
<ul>
<li>
<Link to="/">HOME</Link>
</li>
<li>
<Link to="/about-us">ABOUT US</Link>
</li>
</ul>
</nav>
)
}
export default Navbar;
// Layout.js
import React from 'react';
import Navbar from './Navbar';
import About from '../pages/About';
import Home from '../pages/Home';
import { HashRouter as Router, Switch, Route, Link } from "react-router-dom";
const Layout = () => {
return (
<Router>
<Navbar />
<Switch>
<Route path="/about-us">
<About />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</Router>
)
}
export default Layout;
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Layout from './components/Layout';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<Layout />
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
src
--components
----Navbar.js
----Layout.js
--pages
----About.js
----Home.js
index.js

React - Add Active class to list item react-router

Im learning now the ReactJS and I read a lot of topics about this article, but I can't find a right solution for my problem.
I want to add a active class to li item not a, like
<li class="active">Item</li>
not
<li>Item</li>
This is my reactJS code
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link, Redirect, Switch } from "react-router-dom";
const Content = () => (
<Router>
<div className="content">
<div className="navigation">
<ul>
<li>
<Link to="/app">Wallets</Link>
</li>
<li>
<Link to="/backup">Backup</Link>
</li>
<li>
<Link to="/keys">Private keys</Link>
</li>
<li>
<Link to="/security">Security</Link>
</li>
<li>
How it works
</li>
</ul>
</div>
<div className="wrapper">
<Switch>
<Route path="/app" component={App} />
<Route path="/backup" component={Backup} />
<Route path="/keys" component={Keys} />
<Route path="/security" component={Security} />
<Redirect to="/app" />
</Switch>
</div>
</div>
</Router>
);
...
export default Content;
You can use NavLink, it has a property for the active Links:
import { NavLink } from 'react-router-dom';
After:
<ul>
<li>
<NavLink to="YOUR_ROUTE" exact activeClassName="link-active">
{ YOUR_CONTENT }
</NavLink>
</li>
</ul>
Now your links which are actives will have link-active class name.
activeClassName
The className a receives when its route is active. No active class by default.
https://knowbody.github.io/react-router-docs/api/Link.html

Categories