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}
Related
I am trying to create a new react routes according to the props of components.
App.js routes the landing page to the Home component.
import "./App.css";
import Navbar from "./components/Navbar";
import Home from "./components/Home";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
function App() {
return (
<div>
<Navbar />
<Router>
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</Router>
</div>
);
}
export default App;
I have service card file where I want to create new routes according to props.
Like for example
route = lorem -> /services/lorem
route = ipsum -> /services/ipsum
Servicecard looks like this
import React from "react";
import "../css/servicecard.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Home";
const ServiceCard = ({ text, subClass, image, route }) => {
return (
<>
<div className={`card-container ${subClass}`} data-aos="fade-up">
<span className="card-title">{text}</span>
<img src={image} alt="service-icon" />
</div>
</>
);
};
export default ServiceCard;
i think you are talking about route params, here is an example:
export default function ParamsExample() {
return (
<Router>
<div>
<h2>Accounts</h2>
<ul>
<li>
<Link to="/netflix">Netflix</Link>
</li>
<li>
<Link to="/zillow-group">Zillow Group</Link>
</li>
<li>
<Link to="/yahoo">Yahoo</Link>
</li>
<li>
<Link to="/modus-create">Modus Create</Link>
</li>
</ul>
<Switch>
<Route path="/:param" children={<Child />} />
</Switch>
</div>
</Router>
);
}
and in the component child:
function Child() {
let { param } = useParams();
return (
<div>
<h3>ID: {param}</h3>
</div>
);
}
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.
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>
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
Please tell me what's wrong in this when I am clicking on nav link the url is changing but the content is not changing
I am trying all the ways but can't figure out the problem, please have a look at this
App.js
import React, { Component } from 'react';
import './App.css';
import {
BrowserRouter as Router,
Switch,
Route
} from "react-router-dom";
import Home from './components/Home';
import About from './components/About';
import Nav from './components/Nav';
import Contact from './components/Contact';
class App extends Component {
render(){
return (
<React.Fragment>
<div id="page-wrapper">
<Router>
<Nav />
<Switch>
<Route path="/" exact component={Home} />
<Route path="/about" exact component={About} />
<Route path="/contact" exact component={Contact} />
<Route ><Default /></Route>
</Switch>
<Footer />
</Router>
</div>
</React.Fragment>
);
}
}
export default App;
My link file i.e nav bar
<Link to="/">
<li className="nav-item">HOME</li>
</Link>
<Link to="/about">
<li className="nav-item">About</li>
</Link>
Thanks in advance
Moving your BrowserRouter to index.js seems to work in my end.
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
Then remove <Router> from your code.