I have a Contact screen where pressing the "Continue" button should allow me to navigate to "Confirm" screen.
I have used {useHistory} from react-router, and have set the onClick() to history.push('file') but I am still unable to navigate to the desired screen.
Here's the Routes.js file:
import React, { Component } from "react";
import { Router, Switch, Route } from "react-router-dom";
import Review from "./ReviewScreen";
import Contact from "./Contact";
function Routes(props) {
return (
<Router history={props}>
<Switch>
<Route path="/" exact component={Contact} />
<Route path="/Review" exact component={Review} />
</Switch>
</Router>
)
}
export default Routes;
Here's the Contact component:
import React, {useState} from 'react';
import './Contact.css';
import routeChange, {useHistory, Redirect} from 'react-router';
import {BrowserRouter as Router, Route, Link, NavLink, Switch } from 'react-router-dom';
function Contact() {
const history = useHistory();
return (
<div className="Contact">
<header className="Contact-header">
<div className="ButtonAlign">
<button className="button">Previous</button>
{/*Pressing this button should navigate*/}
<button className="button" onClick={()=> history.push("/Review")}>Continue</button>
<button className="button">Cancel</button>
</header>
</div>
);
}
export default Contact;
Buddy, You Don't Need to use props as history in your router tag because by default useHistory Hook is Connected to BrowserRouter just need the Router to be imported from BrowserRouter and Remove the Props it will Work.... Here is your App.js File (Modified)
import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Review from "./ReviewScreen";
import Contact from "./Contact";
function Routes(props) {
return (
<Router>
<Switch>
<Route path="/" exact component={Contact} />
<Route path="/Review" exact component={Review} />
</Switch>
</Router>
);
}
export default Routes;
Related
I tried using react router but it doesn't work. I already know that React Router Dom v6 has changed from Switch to Routes but when I run the program it just shows a blank screen. Does anyone know how to fix this? Here is my code:
App.js
'''
import React, {Component} from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { render } from "react-dom";
import HomePage from "./HomePage";
export default class App extends Component{
render() {
return (
<Router>
<div>
<HomePage />
</div>
</Router>
);
}
}
const appDiv = document.getElementById("app");
render(<App />,appDiv);
'''
HomePage.js
'''
import React,{Component} from 'react';
import RoomJoinPage from "./RoomJoinPage";
import CreateRoomPage from "./CreateRoomPage";
import { BrowserRouter as Router ,
Routes ,
Route ,
} from "react-router-dom"
export default class HomePage extends Component{
render () {
return (
<Router>
<Routes>
<Route path='/'>
<p>This is Home Page</p>
</Route>
<Route path='/join' element={<RoomJoinPage />} />
<Route path='/create' element={<CreateRoomPage />} />
</Routes>
</Router>
);
}
}
'''
The error is that "You cannot render a Router inside another Router " occurs when we have 2 Router components in the same React application.
So if u see u are calling in App.js and when u call Homepage from app.js it renders again. Thats why everything becomes blank.
and avoid using p tag inside render function in homepage.js
Try doing this:
**App.js**
import React, {Component} from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { render } from "react-dom";
import HomePage from "./HomePage";
export default class App extends Component{
render() {
return (
<div>
<HomePage />
</div>
);
}
}
const appDiv = document.getElementById("app");
render(<App />,appDiv);
**Homepage.js**
import React,{Component} from 'react';
import RoomJoinPage from "./RoomJoinPage";
import CreateRoomPage from "./CreateRoomPage";
import { BrowserRouter as Router ,
Routes ,
Route ,
} from "react-router-dom"
export default class HomePage extends Component{
render () {
return (
<Router>
<Routes>
<Route path='/'>
</Route>
<Route path='/join' element={<RoomJoinPage />} />
<Route path='/create' element={<CreateRoomPage />} />
</Routes>
</Router>
);
}
}
I am trying to use react router v6. However when try those routes below, it just shows an empty page. What could be the problem ?
App.js
import React from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Home from './components/home';
function App() {
return <BrowserRouter>
<Routes>
<Route path='/' element={<Home />} />
<Route path='/hi' element={<div>hi</div>} />
<Route path='/bye' element={<div>bye</div>} />
</Routes>
</BrowserRouter>
}
export default App;
Home.jsx
import React from "react";
export default function Home(){
return <h1>Home</h1>
}
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(
<App />, document.getElementById('root'))
It works. Check your libraries or Re-Install the Package(npm install).
After deleting package.lock file and node_modules
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
// import Home from "./home";
function Home() {
return <h1>Home</h1>;
}
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/hi" element={<div>hi</div>} />
<Route path="/bye" element={<div>bye</div>} />
</Routes>
</BrowserRouter>
);
}
export default App;
Can anyone tell me why my router is not working, I didn’t do anything to complicated with my app its one one page and I tried to add a router in app.js that has a link to my home page and every time i add router everything disappears from my app its just a white screen.
app.js
import "aos/dist/aos.css";
import { BrowserRouter as Router, Route, Routes} from "react-router-dom";
import Home from "./components/Home";
function App() {
return (
<div className="App">
<h1>Welcome to React Router!</h1>
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</div>
);
}
export default App;
Home.js
import React from 'react'
function Home() {
return (
<div>Home</div>
)
}
export default Home
index.js
import * as React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
Try using Switch instead of Routes and you also don't have to use triangular brackets in element
import Home from './components/Home';
import { Route, Switch } from 'react-router';
<Switch>
<Route path="/" element={Home} />
</Switch>
If you want all path begin with / go to your home page, you can change like this: <Route path="/*" element={} />
I am tried to make a chat room application with react js,
but I have faced a problem when I tried to see just chatroom page then it's ok, but when I refresh the page then again show me the home page that mean show me both page in the chatroom page, I don't know why show me home page again,
I have tried this way:
import React from "react";
import { Router, Route } from "react-router-dom";
import HomePage from "./HomePage";
import TopBar from "./TopBar";
import { createBrowserHistory as createHistory } from "history";
import "./App.css";
import ChatRoomPage from "./ChatRoomPage";
const history = createHistory();
function App() {
console.log("Working");
return (
<div className="App">
<Router history={history}>
<TopBar />
<Route path="/:chatRoomId" component={HomePage} />
<Route
path="/chatroom"
exact
render={(props) => <ChatRoomPage {...props} />}
/>
</Router>
</div>
);
}
export default App;
any suggestion please.
You should use react router dom exact way
like: import { BrowswerRouter as Router, Route, Switch } from "react-router-dom";
then take upper the render router.
import React from "react";
import { BrowswerRouter as Router, Route, Switch } from "react-router-dom";
import HomePage from "./HomePage";
import TopBar from "./TopBar";
import { createBrowserHistory as createHistory } from "history";
import "./App.css";
import ChatRoomPage from "./ChatRoomPage";
const history = createHistory();
function App() {
console.log("Working");
return (
<div className="App">
<Router history={history}>
<TopBar />
<Switch>
<Route
path="/chatroom"
exact
render={(props) => <ChatRoomPage {...props} />}
/>
<Route path="/:chatRoomId" component={HomePage} />
</Switch>
</Router>
</div>
);
}
export default App;
I am having issues with my reactJS routes, When I click on a link, the URL changes on the address bar but it won't render the component except I reload the page.
This is my code:
index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {Switch, Route, BrowserRouter } from 'react-router-dom';
import Home from './components/Home';
import CreateProduct from './components/products/CreateProduct';
if (document.getElementById('root')) {
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route path="/home" component={Home} exact={true} />
<Route path="/products/add" component={CreateProduct} exact={true} />
<Home />
</Switch>
</BrowserRouter>,
document.getElementById('root'));
}
Home.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {Link, BrowserRouter} from "react-router-dom";
export default class Home extends Component {
render(){
return(
<BrowserRouter>
<Link className="nav-link" to="/products/add">Create Product</Link>
</BrowserRouter>
);
}
}
CreateProduct.js
import React, {Component} from 'react';
import {Link, BrowserRouter} from "react-router-dom";
export default class CreateProduct extends Component{
render(){
return(
<BrowserRouter>
<Link className="nav-link" to="/home"></Link>
</BrowserRouter>
);
}
}
Please what am I missing here?
I copied your code and I don't have any issue when I don't use nested BrowserRouters, as you have used. I think you only need the root one, in Index.js
As you already wrapped your app with browser router it's properties are applied to everything it wraps so you don't need to use it in every component.
Also if you want the route to be exact just write exact instead exact={true}
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {Switch, Route, BrowserRouter } from 'react-router-dom';
import Home from './components/Home';
import CreateProduct from './components/products/CreateProduct';
if (document.getElementById('root')) {
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route path="/home" component={Home} exact />
<Route path="/products/add" component={CreateProduct} exact />
<Home />
</Switch>
</BrowserRouter>,
document.getElementById('root'));
}
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {Link} from "react-router-dom";
export default class Home extends Component {
render(){
return(
<Link className="nav-link" to="/products/add">Create Product</Link>
);
}
}