I'm making a React.js file with two buttons through bootstrap. The rendering code is:
import './App.css';
import Nav from './components/Nav';
import Home from './components/Home';
import Tweet from './components/Tweet';
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
function App() {
return (
<Router>
<div className="App">
<header className="App-header">
<Nav />
<Routes>
<Route path='/' exact component={Home} />
<Route path='/tweets' exact component={Tweet} />
</Routes>
</header>
</div>
</Router>
);
}
export default App;
but I get an error, that
Matched leaf route at location "/tweets" does not have an element. This means it will render an with a null value by default resulting in an "empty" page.
Can anyone help me?
the Route component need 2 required property, path and element (not component).
you set a component property and that is undefined. just you set your component to element property :
<Route path='/' exact element={Home} />
<Route path='/tweets' exact element={Tweet} />
Related
I know this question has been asked plenty of times. But sadly after implementing all of the possible solutions I still get a blank browser page after using Route, Routes.
My Code:
import { Container } from 'react-bootstrap'
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Header from './components/Header'
import Footer from './components/Footer'
import HomeScreen from './screens/HomeScreen'
function App() {
return (
<Router>
<Routes>
<Header />
<main className="py-5">
<Container>
<Route path='/' component={<HomeScreen/>} />
</Container>
</main>
<Footer/>
</Routes>
</Router>
);
}
export default App;
Thank You for for help!
Issues
In react-router-dom#6 the Route components can only be rendered directly by the Routes component or another Route component in the case of route nesting.
The Route component API also changed significantly. There are no longer any component or render and children function props. They are replaced by a single element prop taking a React.ReactNode, a.k.a. JSX.
Solution
Move the Routes component down the tree to directly wrap the Route component(s), and switch to using the element prop to pass the routed content.
function App() {
return (
<Router>
<Header />
<main className="py-5">
<Container>
<Routes>
<Route path='/' element={<HomeScreen />} />
</Routes>
</Container>
</main>
<Footer/>
</Router>
);
}
I think you shouldn't nest elements other than <Route> inside <Routes> component. When location changes, <Routes> looks on all of his <Route> children and choose the one that fits. You nested your <Route> element inside <Header> so probably that's the problem. Try to rearrange the structure and move Routes to the top level.
I'm trying to display my 'Home' component in my React project via react-router-dom. Thought I got your tone done right, I don't have a compile time error but the Home component just doesn't show up. Do you have an idea ?
App.js :
import Navbar from "./Components/Navbar";
import {
BrowserRouter,
Routes,
Route
} from "react-router-dom";
import Home from "./Pages/Home";
function App() {
return (
<div className="App">
<BrowserRouter>
<Navbar />
<Routes>
<Route pathname="/" element={<Home />}> </Route>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
Home.js :
import React from "react";
import banner from "../assets/banner.jpg";
import {Link} from 'react-router-dom';
import '../Styles/Home.css';
function Home(){
return (
<div className="home" style={{ backgroundImage: `url(${banner})` }}>
<div className="headerContainer">
<h1>Food Corner</h1>
<p>AMERICAN FOOD AT A CLICK.</p>
<Link>
<button> Order Now </button>
</Link>
</div>
</div>
);
}
export default Home;
If this is Router Router v6 (assuming since you are using <Routes>...</Routes>), the prop name is "path" and not "pathname"
So this:
<Route pathname="/" element={<Home />}> </Route>
Should be this:
<Route path="/" element={<Home />}> </Route>
Here are the docs for React-Router-Dom v6 (which is different than the v5 docs): Here
You should also change your react-router-dom imports. You should import BrowserRouter as Router like:
import { BrowserRouter as Router } from 'react-router-dom'
You have a couple minor issues:
The Route component uses a path prop, not a pathname prop. With no path prop there is no matching path and Home is not rendered.
<Route path="/" element={<Home />} />
The Link is missing what it's linking to, i.e. it is missing the to prop. This causes a TypeError: Cannot read properties of undefined (reading 'pathname') error. Add the to prop link destination. Example:
<Link to="/order">
<button> Order Now </button>
</Link>
When a user goes to my domain www.example.com they see my webpage I created using React. I want to use React to show them a different webpage when they go to www.example.com/anotherpage instead.
This is the code I have in my index.js file which creates the webpage at www.example.com,
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
There are multiple solution for this, if you are creating an SPA with create-react-app, then one of the most popular solution is by using react-router.
As shown in the example, then the basic routing is like this:
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
export default function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav>
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
}
function Home() {
return <h2>Route Home</h2>;
}
function About() {
return <h2>Route About</h2>;
}
function Users() {
return <h2>Route Users</h2>;
}
However if you are using another framework such as Next.js, then they have the filesystem pages where creating a page under /pages/ folder will create a new route.
You need to use React Router for this purpose and declare separate routes for pages you want access to.
npm install react-router-dom
afterward, you can create separate components for the specific routes and attach them to the Routes as seen below,
import { BrowserRouter as Router,Route,Switch} from 'react-router-dom'
const Home = () => <h1>hello world!</h1>
const AnotherPage = () => <div>Another page!</div>
const App = () => {
<Router>
<Switch>
<Route path="/" component={Home}/>
<Route path="/anotherpage" component={AnotherPage}
</Switch>
</Router>
}
export default App;
You can look at the documentation for more examples react-router Quickstart
you should use npm install react-router-dom with nested routing for a better approach
I want to connect my sidebar to dashboard. Everytime I click on an icon in the sidebar I want to sidebar to stays the same but dashboard to change. https://imgur.com/1hwNlNr I am having a problem with the rendering. When I click on the Sound Icon Sidebar does not stay as you can see https://imgur.com/YjLmhLh
import React from 'react'
import './SystemSidebar.css'
import SoundIcon from '#material-ui/icons/Computer';
import ComputerIcon from '#material-ui/icons/Computer';
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';
import Sound from './Sound';
import Computer from './Computer;
const SystemSidebar=()=> {
return (
<div className='system'>
<div className="sidebar">
<Link to='Sound'><VolumeUpIcon /></Link>
<h4> Sound</h4>
<Link to='Computer'><ComputerIcon /></Link>
<h4> Computer</h4>
</div>
</div>
import React,{Component} from 'react'
import Sound from './Sound';
import Computer from './Computer';
import SystemSidebar from './SystemSidebar';
class MainSystem extends Component {
render(){
return (
<div className="MAIN">
<BrowserRouter>
<SystemSidebar />
<Switch>
<Route exact path="/" component={SystemSidebar} />
<Route exact path="/Sound" component={Sound}/>
<Route exact path="/Computer" component={Computer}/>
</Switch>
</BrowserRouter>
</div>
);
}
}
Did you post the code from two separate .js files into this code block? Your SystemSidebar function is missing some closing parenthesis/brackets and this code has multiple duplicate imports/incorrect paths if all this code lives in the same file.
Other than that, you're rendering SystemSidebar twice when at the root URL. You want a component for some type of home/welcome page at this route, not the sidebar:
<Route exact path="/" component={SystemSidebar} />
Please post complete code in separate code blocks if the code is in separate files.
My Navigation component code
import { BrowserRouter as Router, Link } from "react-router-dom";
<Router>
<header>
<ul className="social">
{/* Couldn't figure this out */}
{/* Link doesn't route properly but a href does */}
<li>
<Link to="/">
!Home
</Link>
</li>
<li>
Home
</li>
</header>
</Router>
Tag works for loading the webpage but tag doesnt work.
The class where I have defined my HashRouter and Switch.
When invoking " !Home " it doesn't load and nor outputs anything in the chrome/firefox console but this same link in href "Home" works and loads the page.
<HashRouter>
<Switch>
<Route
exact
path="/"
render={props => <Posts postsObj={this.state.blog} />}
/>
<Route
path="/post1"
render={props => <Post postObj={this.state.blog[0]} />}
/>
<Route
path="/post2"
render={props => <Post postObj={this.state.blog[1]} />}
/>
<Route
path="/post3"
render={props => <Post postObj={this.state.blog[2]} />}
/>
</Switch>
</HashRouter>
Calling "Main.jsx" from "MainApp.jsx"
<div>
<Header />
<section>
<Main /> // Calling function here.
<Nav />
</section>
<Social />
<Footer />
</div>
Github Source code : https://github.com/SensehacK/react-app
Thanks.
You have two parallel Routers (HashRouter is a special kind of Router component) in your project, one in the Header component and another in Main. Having multiple routers is confusing and could easily break routing, which is probably why your Link is not working as expected.
Since the HashRouter seems to be the one that's expected to work, you might want to move it to the top level, for example to the MainApp component and remove the other. Make sure whenever you use Link, it is nested in a Router (or HashRouter in your case) through its parents/ancestors.
Turns out I got confused between HashRouter and BrowserRouter.
I followed HashRouter in the main component and use
<Main Component>
<HashRouter> <Switch>
<Route exact path="/" render= {component_name1} />
</Switch> </HashRouter>
</Main Component>
And when I was trying to link the path "/" in different component towards "component_name1"
I was using <Link to="/" > Go Home </Link> ( BrowserRouter ) in my HashRouter routing definition.
So for HashRouter to work I need to use <NavLink to="/">Go Home</NavLink>
I was following 2 different sources and hastily forgot about differences of HashRouter and BrowserRouter by even their names and implementation.
Sometimes deadlines takes the best of you to even spot the basic stuff.
Thanks for the response though #Claire Lin
Github code fix commit