I'm trying to navigate to a link /login, when I click the actual link I can see the url change in the browser but the Login component isn't loaded:
// App.tsx
import React from 'react';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import Header from './components/Header/Header';
import Login from './components/Login/Login';
const App = () => {
return (
<React.Fragment>
<Header />
<Router>
<Route path="/login" exact component={Login} />
</Router>
</React.Fragment>
);
};
export default App;
// Header.tsx
import React from 'react';
import {BrowserRouter, Link} from 'react-router-dom';
const Header = () => {
return (
<BrowserRouter>
<Link to="/login">login</Link>
</BrowserRouter>
);
};
export default Header;
And the actual login component:
// Login.tsx
import React from 'react';
// import {useHistory} from 'react-router-dom';
const Login = () => {
console.log('login component opened');
return (
<div>
Login
</div>
);
};
export default Login;
When I click the link in the header component I get navigated to http://localhost:8080/login but the component isn't loading. Also if I refresh that page http://localhost:8080/login I get a message:
Cannot GET /login
First, the Link component needs to be inside BrowserRouter
const App = () => {
return (
<React.Fragment>
<Router>
<Header />
<Route path="/login" exact component={Login} />
</Router>
</React.Fragment>
);
};
Also, you don't need to wrap BrowserRouter around Link component:
import React from 'react';
import {BrowserRouter, Link} from 'react-router-dom';
const Header = () => {
return (
<Link to="/login">login</Link>
);
};
export default Header;
Try this
const Header = () => {
return (
<BrowserRouter>
<Link to="/login">login</Link>
<Switch>
<Route exact path="/login">
<Login />
</Route>
</Switch>
</BrowserRouter>
);
};
Inside App.tsx your import shouldn't look like this:
import Login from './components/Login/login';
It should be like this instead:
import Login from './components/Login/Login';
You used a wrong file name for the Login component. The first letter must be uppercase.
Related
I just wanted to make a simple project setup with react-router-dom but whenever I'm using route the entire page becomes blank. my Nav disappears. why ?
there was a similar question for class component so it wasn't helpful for me.
App.js :
import "./App.css";
import Nav from "./components/Nav";
import Products from "./components/Products";
import About from "./components/About";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
function App() {
return (
<>
<Router>
<Nav />
<Route path="/about" component={About} />
<Route path="/products" component={Products} />
<About />
</Router>
</>
);
}
export default App;
Nav:
import React from "react";
import Navstyle from "../styles/Nav.module.css";
const Nav = () => {
return (
<nav className={Navstyle.Nav}>
<ul className={Navstyle.nav_links}>
<li>
Home
</li>
<li>
Products
</li>
<li>
About
</li>
</ul>
</nav>
);
};
export default Nav;
other components are just returning h2 tags
You need to use a layout (as a HOC) to add a navbar or other things to your code.
just use the components with routes in your router.
I recommend defining the Layout in another file.
export default function App() {
return (
<Layout>
<Router>
<Route component={Products} path="/products" exact />
<Route component={About} path="/about" exact />
</Router>
</Layout>
);
}
const Products = () => {
return <p>Products</p>;
};
const About = () => {
return <p>about</p>;
};
const Navbar = () => {
return <p>navbar</p>;
};
const Layout = ({ children }) => {
return (
<div>
<Navbar />
<div>{children}</div>
</div>
);
};
I find out ! the problem was YouTube videos I guess. first of all you must add BrowserRouter to your index.js not app.js , like this :
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById("root")
);
reportWebVitals();
after that you must use react router in that way , not the way I tried first :
import "./App.css";
import Nav from "./components/Nav";
import Products from "./components/Products";
import About from "./components/About";
import { Route, Routes } from "react-router-dom";
function App() {
return (
<>
<Nav />
<Routes>
<Route path="/About" element={<About />} />
</Routes>
</>
);
}
export default App;
during the changes of react-router-dom in version 6 , this is the new way of using router.
the link of docs :
https://reactrouter.com/docs/en/v6/getting-started/overview
I have a Link in my Footer.js, and for some reason, it's not working as links in the browser. Like not showing up a pointer on the link etc. I have multiple Links in my Nav component. They all are working fine, but if I place a Link in any other component, it doesn't work. I have tried using BrowserRouter instead of HashRouter and NavLink instead of Link, but the problem still exists. It seems like a reckless mistake, though.
For now, I have this as a static website. That's why I haven't wrapped my components in Switch and Route.
Footer.js
import { Link } from 'react-router-dom'
const Footer = () => {
return (
<div>
<h1>Create group!</h1>
<Link to="/" className="rounded">Get Started</Link>
</div>
)
}
export default Footer
App.js:
import Footer from './Footer'
import { HashRouter } from 'react-router-dom'
const App = () => {
return (
<HashRouter basename="/">
<Nav />
<Home />
<About />
<HowItWorks />
<GroupCarousel />
<EventCarousel />
<Footer />
</HashRouter>
);
}
export default App;
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
Any help would be appreciated.
You have to define your routes inside HashRouter using Switch and Route tags which is to be used inside the app. Otherwise your routes won't work. Try following code and it will work as expected.
Footer.js
import { Link } from 'react-router-dom'
const Footer = () => {
return (
<div>
<h1>Create group!</h1>
<Link to="/" className="rounded">Get Started</Link>
</div>
)
}
export default Footer
App.js
import Footer from './Footer'
import { HashRouter } from 'react-router-dom'
const App = () => {
return (
<HashRouter basename="/">
<Switch>
<Route path="/" exact component={Home} />
</Switch>
</HashRouter>
);
}
export default App;
Home.js
import React from 'react'
...
const Home = () => {
return (
<>
<Nav />
<Home />
<About />
<HowItWorks />
<GroupCarousel />
<EventCarousel />
<Footer />
</>
):
}
export default Home;
I have a parent component which is rendering some stuff and a child component which is getting some props from parent component. And when user click button in Parent then it should redirect to completely new Page of child componen.
Parent Component
import React from "react";`enter code here`
import "./styles.css";
import { BrowserRouter as Router, Link, Route, Switch } from 'react-router-dom'
import ChildComponent from './ChildComponent'
export default function App() {
const someData = {
name : "Joh Doe"
}
return (
<div className="App">
<h1>This is parent Component</h1>
<Router>
<Link to='/secondpage'>Click me for Second Page</Link>
<Route
path='/secondpage'
render={(props) => (
<ChildComponent {...someData} isAuthed={true} />
)}
/>
</Router>
</div>
);
}
ChildComponent.js
import React from "react";
export default function ChildComponent(props) {
console.log("Data", props);
return <div>This is Second Page. It should open in new page. Also it should render incoming props</div>;
}
Work Demo
try doing this:
import React from 'react';
import {BrowserRouter as Router,Route, Redirect,Switch} from 'react-router-dom';
import Home from './App.js';
import Tutorials from './tutorials.js';
function Routes() {
return (
<Router>
<div>
<Switch>
<Route path="/" component = {Home}>
<Redirect from = "/blog/" to="/tutorials/" />
<Route path = "/tutorials/" component = {About} />
</Switch>
</div>
</Router>
)
}
i am change code .
parent component
import React from "react";
import { Link } from "react-router-dom";
export default function ParentComponent(props) {
console.log("Data", props);
return (
<div className="App">
<h1>This is parent Component</h1>
<Link to="/secondpage">Click me for Second Page</Link>
</div>
);
}
child component
import React from "react";
export default function ChildComponent(props) {
console.log("Data", props);
return (
<div>
This is Second Page. It should open in new page. Also it should render
incoming props
</div>
);
}
app component
import React from "react";
import "./styles.css";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import ChildComponent from "./ChildComponent";
import ParentComponent from "./parentComponent";
export default function App() {
const someData = {
name: "Joh Doe"
};
return (
<div className="App">
<Router>
<Switch>
<Route exact path="/secondpage">
<ChildComponent {...someData} isAuthed={true} />
</Route>
<Route exact path="/" component={ParentComponent} />
</Switch>
</Router>
</div>
);
}
Work Demo
I started off thinking this was going to be an easy issue; however I was wrong. I have the following home page:
import React,{Component} from "react";
import {Link} from "react-router-dom";
const Home = (props) =>{
return(
<div>
<h1>My Portal Home</h1>
Click <Link to="/login">Here</Link> To Log In.
</div>
)
}
export default Home;
My main component looks like this: I am certain it is NOT what it is supposed to look like:
import React, {Component} from "react";
import {Router, Route, Link} from "react-router-dom";
import Login from './login/login';
import Home from './home/home';
const Main = (props) =>{
return(
<Router>
<div>
<Route path="/" component={Home}/>
<Route path="/login" component={Login}/>
</div>
</Router>
);
};
export default Main;
Finally my index:
import React from 'react';
import ReactDOM from 'react-dom'
import Main from "./main";
import './index.css';
ReactDOM.render(<Main />,document.getElementById('root'));
When I enter the site address, the home pages does not show and I get errors (warnings):
Failed prop type: Invalid prop 'component' supplied to 'Route': the prop is not a valid React component
in Route (at main.js:11)
I am OBVIOUSLY doing this wrong, but my goal is to have a home page with a link to my login page. Assistance is greatly appreciated.
Try the following:
Main.js
import React from "react";
import {BrowserRouter, Route} from "react-router-dom";
import Login from './Login';
import Home from './Home';
const Main = () =>{
return(
<BrowserRouter>
<div>
<Route exact path="/" component={Home}/>
<Route path="/login" component={Login}/>
</div>
</BrowserRouter>
);
};
export default Main;
Home.js
import React from "react";
import {Link} from "react-router-dom";
const Home = () =>{
return(
<div>
<h1>My Portal Home</h1>
Click <Link to="/login">Here</Link> To Log In.
</div>
)
};
export default Home;
Login.js
import React from "react";
const Login = () =>{
return(
<div>
Login
</div>
);
};
export default Login;
Made a CodeSandbox, hopefully this helps
CodeSandbox
Main.js
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const Main = () => (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/login">Login</Link>
</li>
</ul>
<hr />
<Route exact path="/" component={Home} />
<Route path="/login" component={Login} />
</div>
</Router>
);
const Home = () => (
<div>
<h2> Home </h2>
</div>
);
const Login = () => (
<div>
<h2> Login Page </h2>
</div>
);
export default Main;
[
import React, { Component } from "react";
import { BrowserRouter as Router , Route } from "react-router-dom";
const NewRout = () => {
return(
<p> MY ROUTE </p>
);
}
class App extends Component {
render() {
return (
<Router>
<Route path="/signin" Component={NewRout} />
</Router>
);
}
}
export default App;
]1I'm using router in my react page. But I can't see output.
I import BrowserRouter and Route from react-route-dom
and try to show mt component inside the route.but this is not working for me.Please help me how to solve this issue. Thanks
<BrowserRouter><Route path="signin" Component={Signin} /></BrowserRouter>
You have a mistake in your path:
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Link } from "react-router-dom";
import "./styles.css";
const Home = () => (
<h1>
Home <Link to="/signin">SING</Link>
</h1>
);
const SingIn = () => (
<h1>
<Link to="/">Home</Link>
This is singin page
</h1>
);
ReactDOM.render(
<div>
<BrowserRouter>
<div>
<Route exact path="/" component={Home} />
<Route path="/signin" component={SingIn} />
</div>
</BrowserRouter>
</div>,
document.getElementById("root")
);
Now locate to http://localhost:port/singin you will see your component.
Note: I added a / before your path. This denotes that you are going to signin from your root that is /.
You need to use a prop called exact which matches for exact Route.
Try this SandBox
https://codesandbox.io/s/moj8kxp0nx