I have a component that imports a Router and it isn't working and there isn't any error message. The pages aren't appearing on the browser. It is a course s' app. Because of the fact that this course is a bit old, some things could be overpast. Here are the codes of my components:
import '../common/template/dependencies'
import React from 'react'
import Routes from './Routes'
export default props => (
<div className='wrapper'>
<div className='content-wrapper'>
<Routes />
</div>
</div>
)
The component Routes.js that does the routing:
import React from 'react'
import {Router, Route , Redirect, hasHistory} from 'react-router'
import Dashboard from '../dashboard/Dashboard'
import BillingCycle from '../billingCycle/BillingCycle'
export default props => (
<Router history={hasHistory}>
<Route path='/' component={Dashboard} />
<Route path='/billingCycles' component={BillingCycle} />
<Redirect from='*' to='/' />
</Router>
)
When I comment this line of the component above, everything works well.
{/*<Routes />*/}
import React from 'react'
import {BrowserRouter as Router, Route, Redirect, Switch} from 'react-router-dom';
import Dashboard from './DashBoard';
import BillingCycle from './BillingCycle'
export default props => (
<Router>
<Switch>
<Route exact path='/' component={Dashboard}/>
<Route exact path='/billingCycles' component={BillingCycle}/>
<Redirect from='*' to='/'/>
</Switch>
</Router>
)
Check your code does hasHistory is available in new version react-router.
Also you should use react-router-dom.
Hope this helps..
Use react-router-dom
Change your import in Route.js like this:
import {BrowserRouter as Router, Route} from 'react-router-dom'
Related
I am new to react and have been struggling with the router for a crud application, attaching the app.js file and the console errors. CodeSandbox
import './App.css';
import AddUser from "./components/AddUser";
import Navbar from "./components/navbar";
import CrudApp from "./components/CrudApp";
import AllUsers from "./components/AllUsers";
import{ Routes, Route} from "react-router-dom";
import {BrowserRouter as Router} from "react-router-dom";
function App() {
return (
<div>
<Router>
<Navbar />
<Routes>
<Route path='/add'>
<AddUser/>
</Route>
<Route path='/all'>
<AllUsers />
</Route>
<Route path='/'>
<CrudApp />
</Route>
</Routes>
</Router>
</div>
);
}
export default App;
This is the error image
I have been trying to find a solution for this.
Navbar, Home, Services, Contactus are different components that render fine when I don't user the Route method. They also render fine within the BrowserRouter tags. But when I try to place them within the Route tags, the whole screen goes blank
import Contactus from './Contactus';
import Navbar from './Navbar';
import Home from './Home';
import Services from './Services';
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
import React, { Component } from 'react';
function App() {
return (
<div className="App">
<h1>This is React Router</h1>
<Router>
<Navbar/>
<Route path="/home" Component={Home} exact />
<Route path="/services" Component={Services} exact />
<Route path="/contactus" Component={Contactus} exact />
</Router>
</div>
);
}
export default App;
What am I doing wrong?
I have managed to fix this. The library installed was react-router-dom v6 but the coding was done for earlier versions. Below are the changes I made and its now working.
Fixes -
All the <Route> lines need to be enclosed within a <Routes> block
For some reason, component is not being accepted as a parameter in the new version so essentially component={Home} is now replaced by element={<Home/>}
And of course, we now need to import Routes also from react-router-dom
import logo from './logo.svg';
import './App.css';
import Contactus from './Contactus';
import Navbar from './Navbar';
import Home from './Home';
import Services from './Services';
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
import React from 'react';
function App() {
return (
<div className="App">
<h1>This is React Router</h1>
<Router>
<Navbar/>
<Routes>
<Route path="/home" element={<Home/>} exact />
<Route path="/services" element={<Services/>} />
<Route path="/contactus" element={<Contactus/>} />
</Routes>
</Router>
</div>
);
}
export default App;
I want to conditionally redirect to a different page, and here is my code :
render() {
if (this.state.logged) {
return <Redirect to="/admin" />;
}
console.log("Login");
return (
<div style={this.state.body}>
<div style={this.state.box}>
<br />
<br />
{this.getForm()}
<br />
<br />
</div>
</div>
);
}
The issue is when the condition is satisfied and the redirection to admin.jsx should take place
I keep getting this error:
Error: Invariant failed: You should not use <Redirect> outside a <Router>
Here is my app.js
import React from "react";
import logo from "./logo.svg";
import "./App.css";
import { link, Switch, Route } from "react-router-dom";
import Login from "./components/Login";
import Logout from "./components/Logout";
import Admin from "./components/Admin";
function App() {
return (
<switch>
<Route exact path="/" component={Login} />
<Route path="/admin" component={Admin} />
<Route path="/user" component={Admin} />
<Route path="/logout" exact component={Logout} />
</switch>
);
}
Here is my index.js:
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import "bootstrap/dist/css/bootstrap.css";
import Login from "./components/Login";
ReactDOM.render(<Login />, document.getElementById("root"));
serviceWorker.unregister();
This is what is being done in the tutorial, and I have absolutely no idea why this is happening.
Please help
You have to wrap your whole application with the Router component provided by react-router-dom. If you try to use any component from that library outside a Router, you will get that error.
Also, this is probably more a matter of preference, but I think I wouldn't render the Login component as the root in the application. I would render the App component and then redirect to the Login if not logged in.
Therefore, you should have something like this in your index.js
import React from "react";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import "bootstrap/dist/css/bootstrap.css";
import { BrowserRouter as Router } from "react-router-dom";
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById("root"));
serviceWorker.unregister();
Wrap your whole App with Router from react-router-dom since it provides the context for Redirection
import React from "react";
import logo from "./logo.svg";
import "./App.css";
import { Link, Switch, Route, BrowserRouter as Router } from "react-router-dom";
import Login from "./components/Login";
import Logout from "./components/Logout";
import Admin from "./components/Admin";
function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={Login} />
<Route path="/admin" component={Admin} />
<Route path="/user" component={Admin} />
<Route path="/login" exact component={Login} />
<Route path="/logout" exact component={Logout} />
</Switch>
</Router>
);
}
Render your app here not Login and put your Login inside the Router.
ReactDOM.render(<App />, document.getElementById("root"));
react route path is not working
it shows only product component in all URL
I Have instilled react-router-dom, and also import BrowserRouter as Router,
Switch,
Route,
Link
What is the problem? I can not figure it out.
import React from 'react';
import Navbar from './component/Navbar/Navbar';
import Product from './component/Product/Product';
import {BrowserRouter as Router,Switch,Route,Link} from "react-router-dom";
import UpComing from './component/UpComing/UpComing';
import NotFound from './component/NotFound/NotFound';
import OrderReview from './component/OrderReview/OrderReview';
function App() {
return (
<div className="App">
<Navbar></Navbar>
<Router>
<Switch>
<Route to="/product">
<Product></Product>
</Route>
<Route to="/OrderReview">
<OrderReview></OrderReview>
</Route>
<Route exact to="/">
<Product></Product>
</Route>
<Route to="*">
<NotFound></NotFound>
</Route>
</Switch>
</Router>
</div>
);
}
export default App;
You should be using path instead of to on your routes. to is used for Link components. I've created a minimal representation of your code working on codesandbox
https://codesandbox.io/embed/react-router-playground-g0uzc?fontsize=14&hidenavigation=1&theme=dark
I'm a beginner in React and I'm learning how to route. My page changes urls, but the view turns to a blank page. My index page is working fine. I don't have any console errors.
In Router.js
import React from "react";
import {
BrowserRouter,
Route,
Switch,
} from "react-router-dom";
import App from './App'
import SinglePriceGrid from './component/SinglePriceGrid'
function Router() {
return (
<BrowserRouter>
<Switch>
<Route exact path="/" component={App} />
<Route path="/single-page-grid" component={SinglePriceGrid} />
</Switch>
</BrowserRouter>
)
}
export default Router
In SinglePriceGrid.js
import React from 'react';
import '../css/SinglePriceGrid.css'
class SinglePriceGrid extends React.Component {
render() {
return (
<div className="SinglePriceGrid">
<h1>Hello Single Price Grid!</h1>
</div>
);
}
}
export default SinglePriceGrid;
edit: Added the imports I used
edit: Readded the Switch, but it did not solve the problem
keep the Routes inside Switch. Try this
import React from "react";
import {
BrowserRouter,
Route,
Switch,
} from "react-router-dom";
import App from './App'
import SinglePriceGrid from './component/SinglePriceGrid'
function Router() {
return (
<BrowserRouter>
<Switch>
<Route exact path="/" component={App} />
<Route path="/single-page-grid" component={SinglePriceGrid} />
</Switch>
</BrowserRouter>
)
}
export default Router
I'm really sorry, but the error is really humiliating. My path is wrong. I used "page" instead of "price" for the endpoint.