Routing not working with react-router-dom - javascript

I'm working on one of my friend's half-built React Project. I'm trying to route my react-app with react-router-dom. The components inside the <switch> are not working. Here's my
App.js
import React from 'react';
import Header from './components/Header';
import Main from './components/Main';
import Footer from './components/Footer';
import ProcessInput from './components/ProcessInput';
// Import react-router-dom
import { BrowserRouter as Router, Switch, Route} from 'react-router-dom';
function App() {
return(
<Router>
<div className="App">
<Header />
<Switch>
<Route path="/" exact component={Main} />
<Route path="/process" component={ProcessInput} />
</Switch>
<Footer />
</div>
</Router>
);
}
export default App;
Main.js
import React from 'react';
import Slider from './Slider';
import Card1 from './Card1';
import Card2 from './Card2';
import Prompt from './Prompt';
class Main extends React.Component {
render() {
return (
<div>
<main>
<Slider />
<Card1 />
<Card2 />
<Prompt />
</main>
</div>
)
}
}
export default Main;
The <Header /> and <Footer /> which are outside the <Switch> are showing anyways as intended. But, I want the Main component to be loaded as a root component (Launcher).
There are no errors on the console.
Please help me get to know what am I doing wrong. Thanks in advance :)

<Route path="/" exact>
<Main/>
</Route>
<Route path="/process"><ProcessInput/>
</Route>
This is the old way to do it. You can try this

Related

utils.ts:757 Uncaught Error: [div] is not a <Route> component

I try to make a route of Register and Login components inside a div(className='container') in react-router v6, but when i try to access these components I reach a blank page, then when i rid the div class it works very well, i don't know if the problem from the div. please help me to fix it:
this is my code:
enter code here
import './App.css';
import Navbar from './components/layout/Navbar';
import Footer from './components/layout/Footer';
import Landing from './components/layout/Landing';
import {BrowserRouter as Router, Outlet, Routes, Route} from "react-router-dom";
import Register from "./components/auth/Register";
import Login from "./components/auth/Login";
function App() {
return (
<Router >
<div className="App">
<Navbar />
<Routes>
<Route path="/" element={<Landing />} />
<div className="container">
<Route path="/register" element={<Register />} />
<Route path="/login" element={<Login />} />
</div>
</Routes>
<Footer />
</div>
</Router>
);
}
export default App;
import React, { Component } from 'react';
import {Outlet} from 'react-router-dom';
class Register extends Component {
render() {
return (
<div >
<h1>Register</h1>
</div>
)
}
}
export default Register;
import React, { Component } from 'react';
import {Outlet} from 'react-router-dom';
class Login extends Component {
render() {
return (
<div>
<h2>Login</h2>
</div>
)
}
}
export default Login;
import React, { Component } from 'react';
import { Link, Outlet } from "react-router-dom";
class Landing extends Component {
render() {
return (
<div className="landing">
<div className="dark-overlay landing-inner text-light">
<div className="container">
<div className="row">
<div className="col-md-12 text-center">
<h1 className="display-3 mb-4">Developer Connector
</h1>
<p className="lead"> Create a developer profile/portfolio, share posts and get help from other developers</p>
<hr />
<Link to="/register" className="btn btn-lg btn-info mr-2">Sign Up</Link>
<Link to="/login" className="btn btn-lg btn-light">Login</Link>
</div>
</div>
</div>
</div>
</div>
)
}
};
export default Landing;
When you try to put a DIV object as a route, the problem occurs.
I suggest you remove the DIV from the APP component and put it inside each page (register, login) as needed.
Wish you the best!
import './App.css';
import Navbar from './components/layout/Navbar';
import Footer from './components/layout/Footer';
import Landing from './components/layout/Landing';
import {BrowserRouter as Router, Outlet, Routes, Route} from "react-router-dom";
import Register from "./components/auth/Register";
import Login from "./components/auth/Login";
function App() {
return (
<Router >
<div className="App">
<Navbar />
<Routes>
<Route path="/" element={<Landing />} />
<Route path="/register" element={<Register />} />
<Route path="/login" element={<Login />} />
</Routes>
<Footer />
</div>
</Router>
);
}
export default App;
Don't use div inside Routes. Use Route with some custom components.

Nested routing in react.js is not giving the desired results

I want to display a custom component Resource.js whenever I click the linked text within a labCard.js component. On using the Outlet hook the Resource component is displayed within the lab Card and the Body.js component is not replaced. Body.js component is a collection of labCards component. My desire is to display the resource component in place of body component whenever I click Begin on the labCard component.
This is the App component
import React from 'react'
import { Routes, Route } from 'react-router-dom'
import Navbar from './components/Navbar'
import Home from './components/Home'
import Body from './components/Body'
import AboutUs from './components/AboutUs'
import GetHelp from './components/GetHelp'
import Footer from './components/Footer'
import Resource from './subComponents/Resource'
import './App.css';
function App() {
return (
<div>
<Navbar />
<Routes>
<Route path="/" element={ <Home /> } />
<Route path="/body/*" element={ <Body /> } >
<Route path="resource" element={ <Resource /> } />
</Route>
<Route path="/about" element={ <AboutUs /> } />
<Route path="/help" element={ <GetHelp /> } />
</Routes>
<Footer />
</div>
);
}
export default App;
This is the body Component
import React from 'react'
import LabCard from '../subComponents/LabCard'
import { data } from '../data'
import './Body.css'
export default function Body() {
const [labData, setLabData] = React.useState(data)
let labCardElements = labData.map(lab =>
<LabCard
key={lab.id}
labID={lab.id}
labType={lab.type}
labTitle={lab.title}
labResourceUrl={lab.resourceUrl}
/>)
return (
<section className='experiment-body-section'>
<h1 className='experiment-body--title'>Experiments</h1>
<p className='experiment-body--description'>Here are all the experiments</p>
<div className='experiment-body'>
{labCardElements}
</div>
</section>
)
}
This is the labCard component
import React from 'react'
import { Link } from 'react-router-dom'
import './Card.css'
export default function LabCard(props) {
return (
<div className='lab-card'>
<p className='lab-card--id'>{props.labType}</p>
<h2 className='lab-card--title'>{props.labTitle}</h2>
<div className="parent">
<div className='lab-card--overlay'></div>
<Link to="resource" className='lab-card-overlay--button'>Begin</Link>
</div>
</div>
)
}
If I'm understanding your question/issue correctly, it is that you don't want to render both the Body and Resource components at the same time.
In this case you should render Body on a nested index route. Both nested routes will be rendered into an Outlet by default on the parent route.
<Route path="/body">
<Route index element={<Body />} /> // <-- "/body"
<Route path="resource" element={<Resource />} /> // <-- "/body/resource"
</Route>

text for h1 tag is not showing in browser

I am trying to display text in h1 tags but only about but about.js displays text. First one is shop.js component and second file is app.js file.
import React from 'react';
import './App.css';
function Shop() {
return (
<div>
<h1>Shop page</h1>
</div>
);
}
export default Shop;
My App component:
import React from 'react';
import Nav from './Nav';
import Shop from './Shop';
import About from './About';
import Home from './Home';
import './App.css';
import {BrowserRouter as Router,Switch,Route} from 'react-router-dom';
function App() {
return (
<Router>
<div className="App">
<Nav />
<Switch>
<Router path="/" exact component={Home} />
<Route path="/about"component={About} />
<Router path="/shop" component={Shop} />
</Switch>
</div>
</Router>
);
}
export default App;
Your routes and the Shop component itself look fine, so I'm guessing you just forgot to export the Shop component:
export function Shop() {
return (
<div>
<h1>Shop page</h1>
</div>
);
}
try adding shop route before home route like this:
<Route path="/about"component={About} />
<Router path="/shop" component={Shop} />
<Router path="/" exact component={Home} />
i have created a code expample here

Nothing is rendering in root id

nothing is rendering on my page and i'm quite confused. I was wondering if anyone could help me with this
App.js:
import React from "react";
import Header from "../layout/Header/Header";
import Footer from "../layout/Footer/Footer.jsx";
import {
BrowserRouter as Router,
Route,
Switch,
Redirect
} from "react-router-dom";
import NotFound from "./NotFound";
import Home from "../pages/Home";
import Pricing from "../pages/Pricing";
import Contact from "../pages/Contact";
import About from "../pages/About";
import Dashboard from "../pages/Dashboard";
import Signin from "../pages/Signin";
class App extends React.component {
render() {
return (
<>
<div className="App">
<Header />
<Router>
<App />
<Switch>
<Route exact path="/home" component={Home} />
<Route exact path="/about" component={About} />
<Route exact path="/contact" component={Contact} />
<Route exact path="/pricing" component={Pricing} />
<Route exact path="/dashboard" component={Dashboard} />
<Route exact path="/signin" component={Signin} />
<Route component={NotFound} />
<Redirect from="/" to="home" />
</Switch>
</Router>
</div>
<Footer />
</>
);
}
}
export default App;
And here's my index.js:
import React from "react";
import { render } from "react-dom";
import App from "./components/App/App";
//import Signup from "components/pages/SignupBRUH";
import "./styles/styles.scss";
render(<App />, document.getElementById("root"));
My project is also using passport, if that helps with anything. This might be an error with routes or something. I don't know.
Would be awesome if someone could solve this for me, thanks.
Can you try rendering the below for App component, to make sure the template is wired up correctly
class App extends React.component {
render() {
return (
<>
<div>
App Component
</div>
</>
);
}
}

<BrowserRouter> Does not remove hashbang from route

There is a #/ (hashbang) in my react route...
searching online yeilds covering <Route> with the new <BrowserRouter> will fix the problem
import React, { Component } from 'react';
import './App.scss';
import { observer } from 'mobx-react';
import { Header } from './components/Header'
import { Footer } from './components/Footer';
import { Route , BrowserRouter , Switch } from 'react-router-dom';
import MainState from './components/appset/MainState';
import HomePage from './components/HomePage';
import { TestContent } from './components/TestContent';
import { Account } from './components/Account';
import { TokenList } from './components/TokenList';
import { TokenPage } from './components/TokenPage';
import ErrorPage from './components/ErrorPage';
class Layout extends Component {
render() {
return (
<div id="bodyWheel" className={`App ${MainState.currentTheme} ${MainState.currentLang}`}>
<Header />
<div id="App-intro" className={this.state.resolutionHeight}>
<div className="container">
<div className="layout-main">
<BrowserRouter>
<Route path="/" exact component={HomePage} />
<Route path="/test" component={TestContent} />
<Route path="/account/:id" exact component={Account} />
<Route path="/token" exact component={TokenPage} />
<Route path="/token/:id" exact component={TokenList} />
<Route path="/operation/:id" exact component={HomePage}/>
<Route path="/error/:id" exact component={ErrorPage} />
</BrowserRouter>
</div>
</div>
</div>
<Footer />
</div>
);
}
}
export default Layout;
It adds #/ by itself at the end of every route for example:
www.foo.com/account/tera
becomes
www.foo.come/account/tera#/
<BrowserRouter> did nothing at all.
Will building and uploading to a webserver instead of running on 'npm start' fix the problem?
(edit:) turns out <BrowserRouter> works but something just keeps adding#/to the end of my routes the routs without#/` works just fine
fix is in the <BrowserRouter> edit to <BrowserRouter basename="">
and cover the main div
<BrowserRouter basename="">
<div id="bodyWheel" className={`App ${MainState.currentTheme} ${MainState.currentLang}`}>
....
</div>
</BrowserRouter>
fixed all the routing problems!

Categories