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

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>

Related

React Router Dom dos not renders child components

Here is my code
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
//import Login from "./components/Login/Login";
import Sidebar from "./components/sidebar/Sidebar.jsx";
import Topbar from "./components/topbar/Topbar.jsx";
import Home from "./Pages/home/Home";
import UserList from "./Pages/userList/UserList";
function App() {
return (
<Router>
<Topbar />
<div className="container">
<Sidebar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/user" element={<UserList />} />
</Routes>
</div>
</Router>
);
}
export default App;
In the above code the Topbar and Sidebar components render but Home and Userlist components do not. What could be wrong?

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.

Functions are not valid as a React child when wraping Routes in App

I'm trying to wrap Routes using Layout component so it puts all content into a bootstrap 12 column grid.But it doesnt wrap my text inside Route components and I get a warning that functions are not valid as a React child. Here is the App.js code:
import './App.css';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './Home';
import Offers from './Offers';
import Financing from './Financing';
import Buying from './Buying';
import Contact from './Contact';
import Gallery from './Gallery';
import Search from './Search';
import Layout from './components/Layout';
function App() {
return (
<Fragment>
<Layout>
<Router>
<Routes>
<Route path='/' element={Home} />
<Route path='/fahrzeugangebote/' element={Offers} />
<Route path='/finanzierung/' element={Financing} />
<Route path='/fahrzeugankauf/' element={Buying} />
<Route path='/galerie/' element={Gallery} />
<Route path='/kontakt/' element={Contact} />
<Route element={Search} />
</Routes>
</Router>
</Layout>
</Fragment>
);
}
export default App;
And here is the code for Layout.js:
import Container from 'react-bootstrap/Container';
export const Layout = (props) => {
return(
<Container>
{props.children}
</Container>
)
};
export default Layout ```
As you can see in the docs, you have to provide the elements like this (ReactElement):
<Route path='/' element={<Home />} />
<Route path='/fahrzeugangebote/' element={<Offers />} />
// etc

Routing not working with react-router-dom

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

<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