We Keep Coding

how to create new react routes in a component according to the props?

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>
);
}

No display on screen after Routing

I'm trying to create a route for my page, I used REACT + TAILWIND bootstrap with vite.So I tried creating a link in my navigation file that would route to other pages, but nothing is displaying. No error is displaying in my terminal but there is a lot of error in my browser console. I don't know what I am doing wrong. here is what my console says.
Navigation.jsx
import { Link } from 'react-router-dom'
import * as ROUTES from '../../constants/routes'
const Navigation = () => {
return (
<div>
<ul>
<li>
<Link to={ROUTES.SIGN_IN}>Sign In</Link>
</li>
<li>
<Link to={ROUTES.LANDING}>Landing</Link>
</li>
<li>
<Link t0={ROUTES.HOME}>Home</Link>
</li>
<li>
<Link to={ROUTES.ACCOUNT}>Account</Link>
</li>
<li>
<Link to={ROUTES.ADMIN}>Admin</Link>
</li>
</ul>
</div>
)
}
export default Navigation
Main.jsx
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import { BrowserRouter } from 'react-router-dom'
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
)
App.jsx
import React, { useState } from 'react'
import { Router, Routes } from 'react-router-dom'
import Navigation from './components/Navigation/Navigation'
function App() {
const [count, setCount] = useState(0)
return (
<Router>
<div className="App">
<Routes>
<Navigation/>
</Routes>
</div>
</Router>
)
}
export default App

React-Router-Dom <Link /> tag is changing URL but not rendering the Component

Header Component
import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";
import { ReactComponent as Logo } from "../../asset/crown.svg";
import "./header.scss";
const Header = () => {
return (
<div className='header'>
<Router>
<Link exact className='logo-container' to='/'>
<Logo className='logo' />
</Link>
<div className='options'>
<Link className='option' to='/shop'>
SHOP
</Link>
</div>
</Router>
</div>
);
};
export default Header;
This is my header Component in which I am using Link tag but these tags are changing the URL in the Search Bar but not actually rendering the components.

You don't need the Router inside the Header Component...You can just use Link and then in your App.js setup the Route to the Component. Like So..
App.Js
import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";
import { ReactComponent as Logo } from "../../asset/crown.svg";
import "./header.scss";
const Header = () => {
return (
<div className='header'>
<ul>
<li className='logo-container'>
<Link to='/'>
<Logo className='logo' />
</Link>
</li>
<li>
<Link to="/shop">
SHOP
</Link>
</li>
</div>
);
};
export default Header;
//APP COMPONENT
import React from "react";
import { BrowserRouter as Router,Switch, Route } from "react-router-dom";
const App = () => {
return (
<Router>
<Switch>
<Route exact path="/" component="Home">
<Route path="/shop" component="shop">
</Switch>
</Router>
);
};
export default App;

Make sure not to use BrowserRoute inside BrowserRouter.
e.g: when you place a component inside a component it's not JSX there it gets converted to HTML and can cause an error.

Render all the components in the same place in using Router and Links

I have a sidebar and a TopNav that I render inside App component.
My hierarchy is like
Index > App > SideBar [> Lnks] = TopNav [> Links] = Content
I mean to say My App is rendered inside Index. Inside App, there are 3 Components named Topnav, SideNav, Content .
I want Topnav ,Sidenav to be available everytime but the linkes given in these navs should be rendered inside the Content. How am I supposed like this?
Below is my App.js
class App extends React.Component {
render() {
return (
<div>
<SideNav /> //SideNav should be rendered always
<TopNav /> //This one too
<div className={'content'}>
Render All the data from the links in Sidenav and Topnav here.
</div>
</div>
);
}
}
and my index.js looks like the code below
ReactDOM.render(
<App/>, document.getElementById('root'));
Here's the exact demo of what I want to do.
I just want to know the Routing configuration. What and where to put routing configurations

This app.js work
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import SideNav from './Components/SideNav';
import TopNav from './Components/TopNav';
import Home from './Components/Home';
import Stuff from './Components/Stuff';
import Noroute from './Components/Noroute';
function App() {
return (
<div className="App">
<SideNav/>
<TopNav/>
<Switch>
<Route exact path='/' component={Home} />
<Route path='/stuff' component={Stuff} />
<Route component={Noroute} />
</Switch>
</div>
);
}
export default App;
and create folder Components and add your components
SideNav.js
import React from "react";
import { Link } from 'react-router-dom';
class SideNav extends React.Component {
render(){
return (
<div>
<ul className="navbar-nav mr-auto">
<li><Link to={'/'} className="nav-link"> Home </Link></li>
<li><Link to={'/stuff'} className="nav-link">Stuffs</Link></li>
</ul>
</div>
)
}
}
export default SideNav;

React.js Route - previous page stays after redirection

js and am using react-router-dom.
Say I have 2 files - 1. dashboard.js file
import React, { Component } from 'react';
import {Switch, Route, Link} from 'react-router-dom';
import WYSIWYG from './editor/wysiwyg';
export default class Dashboard extends Component{
render(){
return(
<div className="wrapper">
<Switch>
<Route exact path="/wysiwyg" component={WYSIWYG}/>
</Switch>
<ul id="DASHBOARD-MENU">
<li><Link to={{ pathname: '/wysiwyg'}}>WYSIWYG</Link></li>
</ul>
</div>
);
}
}
Note the ul with id="DASHBOARD-MENU" above
2nd - wysiwyg.js file
import React, { Component } from 'react';
export default class Wysiwyg extends Component{
render(){
return(
<div id="WYSIWYG-CONTAINER">
</div>
);
}
}
Note the div with id="WYSIWYG-CONTAINER" in the above snippet
My problem is:
After redirection to WYSIWYG container from my dashboard, I can still see the - <ul id="DASHBOARD-MENU" .. rendered below the <div id="WYSIWYG-CONTAINER ...
What I understood - is the component WYSIWYG is rendered replacing <Route declared in my dashboard.js file.
What I want:
I don't want the "DASHBOARD-MENU" element to render in my "WYSIWYG" page.
Is it possible?

The desired behavior can be obtained by considering both as different routes, and hence rendering only one of them depending on the path:
import React, { Component } from 'react';
import {Switch, Route, Link} from 'react-router-dom';
import WYSIWYG from './editor/wysiwyg';
const Dashboard = () => (
<ul id="DASHBOARD-MENU">
<li><Link to={{ pathname: '/wysiwyg'}}>WYSIWYG</Link></li>
</ul>
);
export default class Dashboard extends Component{
render(){
return(
<div className="wrapper">
<Switch>
<Route exact path="/" component={Dashboard} />
<Route exact path="/wysiwyg" component={WYSIWYG}/>
</Switch>
</div>
);
}
}