I'm using React Router Dom V4, my path to my homepage works but my path to my about page doesn't work.
I'm not sure if it's anything to do with the fact I'm using Xampp or not.
Index.js
import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";
import App from "./components/App";
import About from "./components/About";
const Root = () => {
return (
<Router>
<div>
<Route path="/" component={App} />
<Route path="/about" component={About} />
</div>
</Router>
)
}
render(<Root />, document.getElementById('main'));
Header.js
import React from "react";
const Header = () => {
return (
<div>
<ul>
<li>About</li>
</ul>
</div>
)
}
export default Header;
About.js
import React from "react";
const About = () => {
return (
<p>This is the about page</p>
)
}
export default About;
The problem is that you use plain html links, so React will not be called when the user clicks the link. You should use the Link Element from the router-module.
Try the following for the menu:
import { Link } from "react-router-dom"
....
<li><Link to='/about'>About</Link></li>
Related
I am fairly new to using react and been following a couple of tutorials on YT, I have ran into a problem with one of them. I copied everything line by line, but my text on 'Home' and 'Login' doesnt display! I get no errors, but the page remains blank.
here is App.js
import React from 'react'
import { Routes, Route, useNavigate } from 'react-router-dom';
import Login from './components/Login';
import Home from './container/Home';
const App = () => {
return (
<Routes>
<Route path="login" element={<Login />} />
<Route path="/*" element={<Home />} />
</Routes>
);
};
export default App;
Also the index.js file:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById('root'),
);
**Then Login.jsx
**
import React from 'react';
const Login = () => {
return (
<div>
Login
</div>
);
};
export default Login;
Finally Home.jsx
import React from 'react';``your text``
const Home = () => {
return (
<div>
Home
</div>
);
};
export default Home;
I know I am missing something, but I cant seem to find it! Any and all help is very much appreciated!
Tried to see if I am using on old version of the BroswerROuter/Routes in React, but I have very little knowledge to see the difference just yet!
I'm having an issue with rendering components. I get an 'Invalid Hook call' error in my console. I've tried to check for the three main 'causes' as per the React docs, but I can't seem to find what it is. I'm using React Router and trying to set up the skeleton for my website. Full repository. (Before installing (and setting up) React Router, everything worked just fine...)
No duplicate React as far as I can tell:
Here's my Header.js:
import React, { useState } from "react";
import { Routes, Route, Link } from "react-router-dom";
import { Over } from "../../pages/Over";
import { Partners } from "../../pages/Partners";
import { Contact } from "../../pages/Contact";
import { NavBar } from "./Header.styled";
export const Header = () => {
const [isOpen, setIsOpen] = useState(false);
const handleToggle = () => {
setIsOpen((prevIsOpen) => !prevIsOpen);
};
return (
<>
<NavBar>
<nav className="navBar">
<button onClick={handleToggle}>{isOpen ? "Close" : "Open"}</button>
<ul className={`menuNav ${isOpen ? " showMenu" : ""}`}>
<li>
<Link to="/over">Over</Link>
</li>
<li>
<Link to="/partners">Partners</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
<Routes>
<Route path="over" element={<Over />} />
<Route path="partners" element={<Partners />} />
<Route path="contact" element={<Contact />} />
</Routes>
</nav>
</NavBar>
</>
);
};
Here's my index.js
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import { App } from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<BrowserRouter>
<React.StrictMode>
<App />
</React.StrictMode>
</BrowserRouter>
);
I just checked your repository and couldn't find react-router-dom in your package.json file. Maybe you installed it in a different directory, so reinstalling it in the root level (where your package.json) is located is should solve the issue.
I am trying to use a navlink in my app.jsx file to create links in my navbar but when I try to npm start, I dont see the nav links and I get a message that says No routes matched location "/". I'm not sure why. I saw somewhere that I needed to start using element but I'm not sure how. I'll show app.jsx file with the element statements that didn't seem to work still and the file without using element at all which also didn't help but is what I'm used to. Can someone point me in the right direction?
index.js :
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './pages/App/App';
import { BrowserRouter, Routes, Route } from 'react-router-dom'
ReactDOM.render(
<BrowserRouter>
<Routes>
<React.Fragment>
<Route render={() => <App/>} />
</React.Fragment>
</Routes>
</BrowserRouter>,
document.getElementById('root')
);
App.jsx : with element
import React, { useState } from 'react';
import { Route, NavLink } from 'react-router-dom'
import './App.css';
function App() {
const [puppies, setPuppies] = useState([])
return (
<div className="App">
<header className="App-header">
React Puppies CRUD
<nav>
<NavLink exact to='/' element={<div>Index</div>}>Puppy List</NavLink>
<NavLink className='m-left' exact to='/add' element={<div>Add</div>}>Add Puppy</NavLink>
</nav>
</header>
<main>
</main>
</div>
);
}
export default App;
App.jsx : without element
import React, { useState } from 'react';
import { Route, NavLink } from 'react-router-dom'
import './App.css';
function App() {
const [puppies, setPuppies] = useState([])
return (
<div className="App">
<header className="App-header">
React Puppies CRUD
<nav>
<NavLink exact to='/'>Puppy List</NavLink>
<NavLink className='m-left' exact to='/add'>Add Puppy</NavLink>
</nav>
</header>
<main>
</main>
</div>
);
}
export default App;
Links use a to prop for the target route they are linking to, and the UI needs to be rendered on Route components on the element prop. I suggest unconditionally rendering the App component and move the routes into it.
Example:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './pages/App/App';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App/>
</BrowserRouter>,
document.getElementById('root')
);
App
import React, { useState } from 'react';
import { Routes, Route, NavLink } from 'react-router-dom'
import './App.css';
function App() {
const [puppies, setPuppies] = useState([]);
return (
<div className="App">
<header className="App-header">
React Puppies CRUD
<nav>
<NavLink end to='/'>Puppy List</NavLink>
<NavLink className='m-left' to='/add'>Add Puppy</NavLink>
</nav>
</header>
<main>
<Routes>
<Route path="/" element={<div>Puppy List</div>} />
<Route path="/add" element={<div>Add Puppy</div>} />
</Routes>
</main>
</div>
);
}
export default App;
Im new at routing on react.JS, however I have been struggling because the simple products.jsx
should return a simple message when I click, but no one is displaying.
Index.JS code
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>
, document.getElementById('root'));
registerServiceWorker();
code at App.JS
import React, { Component } from "react";
import NavBar from "./components/navbar";
import { Route, Routes } from 'react-router-dom';
import Products from "./components/products";
import "./App.css";
class App extends Component {
render() {
return (
<div>
<NavBar />
<Routes>
<Route path= "/products" component={Products}></Route>
</Routes>
</div>
);
}
}
export default App;
nav.jsx
import React from "react";
const NavBar = () => {
return (
<ul>
<li>
Home
</li>
<li>
Products
</li>
<li>
Posts
</li>
<li>
Admin
</li>
</ul>
);
};
export default NavBar;
products.jsx code
const Product = () => {
return <h1>Products</h1>;
};
export default Product;
I dont know basically what i'm missing.
In react-router-dom v6 the Route components render their components on the element prop as JSX.
<Route path="/products" element={<Products />} />
If you are still using v5 and have just mixed up documentation, then in v5 use the Switch instead (Routes replaced Switch in v6) and use the component prop as you were.
<Switch>
<Route path="/products" component={Products} />
</Switch>
If you are using react-router-dom 6, you have to use element instead of component inside of each route like this:
<Routes>
<Route path= "/products" element={<Products/>}></Route>
</Routes>
if you are using react-router-dom 5, you have to use Switch instead of Routes, like this:
<Switch>
<Route path= "/products" component={Products}></Route>
</Switch>
I have a Main component that looks like this:
import React from 'react';
import { Provider } from 'react-redux';
import { Router, Route } from 'react-router-dom';
import store from '../store';
import history from '../store/history';
import SideBar from './SideBar';
import { ConnectedUsers } from './UsersPage';
const Main = () => (
<Router history={history}>
<Provider store={store}>
<div>
<SideBar/>
<Route
exact
path="/users"
render={ () => (<ConnectedUsers/>)}
/>
</div>
</Provider>
</Router>
);
export default Main;
It uses a navigation component which I've named SideBar:
import { Link } from 'react-router-dom';
import React from 'react';
const SideBar = () => (
<div>
<Link to="/users">
<h1>Users</h1>
</Link>
</div>
);
export default SideBar;
This doesn't work. When I click on the Users link on the page in the browser, the URL changes to the correct one (localhost:8080/users) but the page remains blank. The component doesn't render. If I put the URL localhost:8080/users manually in the address bar in the browser the component renders correctly.
After some searches, I found people recommending to implement the routes like this:
import React from 'react';
import { Provider } from 'react-redux';
import { Router, Route, withRouter } from 'react-router-dom';
import store from '../store';
import history from '../store/history';
import SideBar from './SideBar';
import { ConnectedUsers } from './UsersPage';
const Main = () => (
<Router history={history}>
<Provider store={store}>
<div>
<SideBar/>
<Route exact path="/users" component={withRouter(ConnectedUsers)}
/>
</div>
</Provider>
</Router>
);
export default Main;
But this also didn't work for me. The exact same propblem remains—the /users page renders correctly when I manually type in the URL in the address bar, but comes up blank if I navigate to that URL using the Link.