Can't use react router element [duplicate] - javascript

This question already has an answer here:
Page layout broken in React Router v6
(1 answer)
Closed 4 days ago.
I am gonna create react router structure in my React JS app. I have an issue. The issue is I can't use react-router element. So I have a component Main Page. I want to display after page is loaded. Also, I have nav component I want display it all the time. But I can see only nav component. Main Page component is found. I don't have any errors, but I can't see it. I can't see its content.
Index js file. Main file in my app
import React from 'react';
import {
createBrowserRouter,
RouterProvider,
} from "react-router-dom";
import MainPage from "./components/MainPage";
import ReactDOM from 'react-dom/client';
import Nav from "./components/Nav";
const router = createBrowserRouter([
{
path: "/",
element: <Nav />,
children: [
{
path: "mainpage/",
element: <MainPage />,
},
],
},
]);
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<RouterProvider router={router} />
</React.StrictMode>
);
Nav component:
import React from 'react';
import { Link } from "react-router-dom";
function Nav(props) {
return (
<header className="header">
<div className="header-container">
<nav className="header-nav">
<ul className="nav-list">
<li>
<Link to={`mainpage/`}>Home</Link>
</li>
<li>
<Link to={`News/`}>News</Link>
</li>
<li>
<Link to={`About/`}>About</Link>
</li>
<li>
<Link to={`Contacts`}>Contacts</Link>
</li>
</ul>
</nav>
</div>
</header>
);
}
export default Nav;
Main page component:
import React from 'react';
function MainPage(props) {
console.log('hi')
return (
<div>
<div className="hello">
hello world
</div>
</div>
);
}
export default MainPage;
I've read the entire page of the react-router for beginners documentation, but I still can't solve this issue. I've tried all that I could.

You should check how Nested routes works :)
So in your case, you're just rendering your Nav component, because you've not defined the "placeholder" (<Outlet>) for your route children.
Your structure must be something like
const router = createBrowserRouter([
{
path: "/",
element: <Layout />,
children: [
{
path: "mainpage/",
element: <MainPage />,
},
],
},
]);
// Layout.jsx
import { Outlet } from 'react-router-dom';
import Nav from "./components/Nav";
const Layout = () => {
return (<>
<Nav />
<Outlet />
</>)
}

Related

Vite unable to recognize createRouterHash functionality

I'm using createHashRouter on a vite project for easier deployment to Github Pages. But vite is not recognizing the routes.
Is there any other configuration also required for this? Please see the code below
Home Component
function Home() {
return (
<div className="App">
Home
</div>
)
}
export default Home
About Component
function About() {
return (
<div className="App">
About
</div>
)
}
export default About
index.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import Home from './Home'
import About from './About'
import './index.css'
import { createHashRouter, RouterProvider } from 'react-router-dom';
const router = createHashRouter([
{
path: '/',
element: <Home />,
},
{
path: '/about',
element: <About />,
},
]);
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<RouterProvider router={router} />
</React.StrictMode>,
)
Navigation to work in browser as expected
The correct way to access the URL is http://127.0.0.1:5173/#/about instead of http://127.0.0.1:5173/about or http://127.0.0.1:5173/#about
The behaviour was not documented well in react-router which caused the confusion.

Managing routing by Link in grandchild component

I have an App component, that has child component NavigationBar. That NavigationBar also has children, those are NavigationBarTabs. What I want to do, is to manage routing in App component, but have links in NavigationBarTabs. If I do it this way, I can only get new content in App by refreshing. If I keep links in App component it works fine, but obviously I would like those links to be in NavigationBarTabs. Is there any way I can do that? Examples below:
Works after clicking link:
<BrowserRouter>
<Route path ='/Profile' component = {Profile}/>
<Route path ='/About' component={About}/>
<Route path ='/Catalog' component={Catalog}/>
<Link to={'/Profile'}>Profile</Link>
<Link to={'/Catalog'}>Catalog</Link>
<Link to={'/About'}>About</Link>
</BrowserRouter>
Works after clicking link and refreshing page:
<BrowserRouter>
<NavigationBar/> <--- Tabs with Links are stored there, same 'to' prop
<Route path ='/Profile' component = {Profile}/>
<Route path ='/About' component={About}/>
<Route path ='/Catalog' component={Catalog}/>
</BrowserRouter>
Wrapping top component in solved the problem
I had a similar issue where I wanted my links to be in a sliding side bar.
here is a way I found worked for me.
Routes Component: I imported the components which i would like to route to into my routes component. As below.
import React, {Component} from 'react'
import {BrowserRouter, Route, Link} from 'react-router-dom';
import Component from './component.js';
const routes = [
{
path: '/',
exact: true,
main: () => <place component here/>
},
{
path: '/dogs',
main: () => <place component here/>
},
{
path: '/cats',
main: () => <place component here/>
}
];
export default routes;
Sidebar Component: I then placed my links in my sidebar component as below.
import React from 'react';
import './SideDrawer.css';
import {BrowserRouter, Route, Link} from 'react-router-dom';
const sideDrawer extends Component{
render(){
return(
<nav className='sidebar'>
<ul>
<li><Link to='/'>Home</Link></li>
<li><Link to='/dogs'>Dogs</Link></li>
<li><Link to='/cats'>Cats</Link></li>
</ul>
</nav>
);
}
};
export default sideDrawer;
Then in my App.js component which will render my page I made the following imports:
import React, {Component} from 'react';
import SideDrawer from './components/SideDrawer/SideDrawer';
import {BrowserRouter, Route, Link} from 'react-router-dom';
import routes from './components/routes/routes.js';
Then included the following in my return statement.
return(
<div style={{height:'100%'}}>
<BrowserRouter>
<SideDrawer/>
<main>
{routes.map((route) => (
<Route
key={route.path}
path={route.path}
exact={route.exact}
component={route.main}
/>
))}
</main>
</BrowserRouter>
</div>
);
}
}
please note everything inside the App.js return statement is wrapped inside a BrowserRouter tag. Hope this can help you.

<Link> freezing page when clicked

I'm building a piece of music streaming app with a Rails backend and react-redux frontend. A react-router Link from an artist index to an art show is freezing the browser.
Links in other parts of the page are working fine, including Links to artist show pages. This Link works with an 'open in new tab' right click.
// from artist_index.jsx
import React from 'react';
import { Link } from 'react-router-dom';
class ArtistIndex extends React.Component {
render() {
return (
<div className="artist-index">
<ul className="artist-index-list">
{this.props.artists.map(artist => {
return <li key={artist.id}>
<Link to={`/artist/${artist.id}`}>{artist.name}</Link>
</li>
})}
</ul>
</div>
);
};
};
export default ArtistIndex;
// from root.jsx
import React from 'react';
import { Provider } from 'react-redux';
import { HashRouter } from 'react-router-dom';
import App from './App';
const Root = ({ store }) => (
<Provider store={store}>
<HashRouter>
<App />
</HashRouter>
</Provider>
);
export default Root;
All other Links are working properly. This is receiving the props correctly, and changing the browser's url, just not actually completing the redirect. In fact, it freezes up the browser completely. Artist Show is working.
When you want to use react-router-dom, you should use Router, Switch, Route, Link from "react-router-dom"
for example, consider these files:
in index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import App from './app/App';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>, document.getElementById('root'));
in App.js
import React from "react"
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"
import categoryIndex from "../components/category/index"
import productIndex from "../components/product/index"
clas App extends Component {
render(){
return (
<Router>
<div className="container"
<Link to={"/category/index"} className="nav-link">
Categories
</Link>
<Link to={"/products/index"} className="nav-link">
Products
</Link>
<Switch>
<Route path="/category/index" component={categoryIndex} />
<Route path="/product/index" component={productIndex} />
</Switch>
</div>
</Router>
);
}
}
export default App;
and then in your target file:
<div id='createNewProduct'>
<Link to={"/product/create"}>
+ Create New Product
</Link>
</div>

Links don't redirect with React DOM Router

I am trying to use the react-dom-router package within my React app but I am not being "redirected" successfully to the component. It only works when I refresh the page or access via the URL.
This is my App.js:
import React, { Component } from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import NavMenu from "./components/NavMenu/NavMenu";
import Contact from "./components/Contact/Contact";
import Home from "./components/Home/Home";
class App extends Component {
render() {
return (
<Router>
<div>
<NavMenu />
<Route exact path='/' component={Home} />
<Route path='/contact' component={Contact} />
</div>
</Router>
);
}
}
export default App;
This is my NavbarMenu component's code:
import React, { Component } from "react";
import { Navbar, Nav } from "react-bootstrap";
import { BrowserRouter as Router, Link } from "react-router-dom";
class NavMenu extends Component {
render() {
return (
<Router>
<Navbar bg='light' expand='lg'>
<Navbar.Brand>Company name</Navbar.Brand>
<Nav className='mr-auto'>
<Nav.Link>
<Link to='/'>Home</Link>
</Nav.Link>
<Nav.Link>
<Link to='/contact'>Contact</Link>
</Nav.Link>
</Nav>
</Navbar>
</Router>
);
}
}
export default NavMenu;
I guess the code for Home & Contact components aren't relevant.
So, when I visit my React app default page http://localhost:3000/ I see the navbar with their links. But when I click in a link, the URL changes but nothing happens until I refresh the page or access from the URL.
I was following this tutorial to get this done. Any ideas?
Its s because you are using Router twice, first in App.js and then again in NavMenu. We only need to wrap the App container (entry point) with Router.
Remove the <Router> from NavMenu component. Write it like this:
import React, { Component } from "react";
import { Navbar, Nav } from "react-bootstrap";
import { Link } from "react-router-dom";
class NavMenu extends Component {
render() {
return (
<Navbar bg='light' expand='lg'>
<Navbar.Brand>Company name</Navbar.Brand>
<Nav className='mr-auto'>
<Nav.Link>
<Link to='/'>Home</Link>
</Nav.Link>
<Nav.Link>
<Link to='/contact'>Contact</Link>
</Nav.Link>
</Nav>
</Navbar>
);
}
}
export default NavMenu;

React File Import Issue

I'm very new to React and ran into an issue when trying to import a "sub-component", for lack of a better word.
In my App.js file I imported my header class: import Header from './Components/Header/Header'; Which worked fine.
Within my Header.js file I'm using router to select different components. However, when I try to import my Home class: import Home from '../Subcomponents/HomePage/HomePage'; I receive the following error: Module not found: Can't resolve '../Subcomponents/HomePage/HomePage'
My file structure is:
app.js
Components/Header/Header.js
Subcomponents/HomePage/HomePage.js
App.js Code:
import React, { Component } from 'react';
import Header from './Components/Header/Header';
import Footer from './Components/Footer/Footer';
import Body from './Components/Body/Body';
import './Assets/css/mainCSS.css';
class App extends Component {
render() {
return (
<div className="App">
<Header />
<Body />
<Footer/>
</div>
);
}
}
export default App;
Header Code:
import React from 'react';
import Home from '../Subcomponents/HomePage/HomePage';
import { Router, Route, Link } from 'react-router-dom';
const header = () => {
return <header>
<Router>
<nav>
<ul>
<li>
<Link to='/'>Home</Link>
</li>
</ul>
<hr />
<Route excat path ="/" component={Home} />
</nav>
</Router>
</header>
}
export default header;
HomePage Code:
import React from 'react';
const homepage =() =>{
return <p>
homepage working
</p>
}
export default homepage;
Am I doing something wrong here or is this not possible in React? Any advice would be greatly appreciated!
Thanks!
From Header.js, ../ puts you into Components, not into the parent. It should be '../../Subcomponents/HomePage/HomePage'.
Also, imho: within each component folder, name the file index.js so that it will be automatically exported. Than you can just do: '../../Subcomponents/HomePage'

Categories