I'm building a piece of music streaming app with a Rails backend and react-redux frontend. A react-router Link from an artist index to an art show is freezing the browser.
Links in other parts of the page are working fine, including Links to artist show pages. This Link works with an 'open in new tab' right click.
// from artist_index.jsx
import React from 'react';
import { Link } from 'react-router-dom';
class ArtistIndex extends React.Component {
render() {
return (
<div className="artist-index">
<ul className="artist-index-list">
{this.props.artists.map(artist => {
return <li key={artist.id}>
<Link to={`/artist/${artist.id}`}>{artist.name}</Link>
</li>
})}
</ul>
</div>
);
};
};
export default ArtistIndex;
// from root.jsx
import React from 'react';
import { Provider } from 'react-redux';
import { HashRouter } from 'react-router-dom';
import App from './App';
const Root = ({ store }) => (
<Provider store={store}>
<HashRouter>
<App />
</HashRouter>
</Provider>
);
export default Root;
All other Links are working properly. This is receiving the props correctly, and changing the browser's url, just not actually completing the redirect. In fact, it freezes up the browser completely. Artist Show is working.
When you want to use react-router-dom, you should use Router, Switch, Route, Link from "react-router-dom"
for example, consider these files:
in index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import App from './app/App';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>, document.getElementById('root'));
in App.js
import React from "react"
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"
import categoryIndex from "../components/category/index"
import productIndex from "../components/product/index"
clas App extends Component {
render(){
return (
<Router>
<div className="container"
<Link to={"/category/index"} className="nav-link">
Categories
</Link>
<Link to={"/products/index"} className="nav-link">
Products
</Link>
<Switch>
<Route path="/category/index" component={categoryIndex} />
<Route path="/product/index" component={productIndex} />
</Switch>
</div>
</Router>
);
}
}
export default App;
and then in your target file:
<div id='createNewProduct'>
<Link to={"/product/create"}>
+ Create New Product
</Link>
</div>
Related
I've been working with the react router dom and I keep seeing a blank white page on my screen.
App.js:
import React from 'react';
import HelloWorld from './HelloWorld';
import { HashRouter as Router, Route } from 'react-router-dom';
import Home from './Home';
function App() {
return (
<Router>
<Home />
<Route path="/notes" exact element={HelloWorld} />
</Router>
);
}
export default App;
Home.js:
import React from 'react';
import { Link } from 'react-router-dom';
function Home() {
return (
<div>
<Link to="/testHome" style={{ color: 'blue', fontSize: '20px' }}>
Go to Notes
</Link>
</div>
);
}
export default Home;
HelloWorld.js:
import React from 'react';
function MyComponent() {
return (
<div>
<h1>Hello world</h1>
</div>
);
}
export default MyComponent;
Index.js:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
When I simply display the components in app.js, I can clearly see the hello world element on the screen, the problem is when I use react router. When I use react router I just see a blank white page. Can anyone help me solve the issue?
There are a couple issues:
The Route component isn't being rendered by a Routes (or other Route component in the case of nested routes).
The element prop takes a React.ReactNode prop value, a.k.a. JSX.
To resolve import the Routes component and wrap the Route component and render the HelloWorld component as JSX.
import React from 'react';
import HelloWorld from './HelloWorld';
import {
HashRouter as Router,
Routes, // <-- import Routes
Route
} from 'react-router-dom';
import Home from './Home';
function App() {
return (
<Router>
<Home />
<Routes> // <-- wrap rendered routes
<Route
path="/notes"
element={<HelloWorld />} // <-- render as JSX
/>
</Routes>
</Router>
);
}
I am having an issue with react router as my url is getting updated on clicking on it but the page is not getting rendered but when I reload it at that specific url then it renders the content whereas I want it to be rendered as soon as I click on the link
this is my App.js
import React from 'react';
import Nav from './Nav';
import { BrowserRouter as Router ,Switch, Route} from 'react-router-dom';
import About from './About'
function App() {
return (
<>
<Router>
<Nav/>
<Switch>
<Route exact path='/about' render={About} />
</Switch>
</Router>
</>
);
}
export default App;
This is my Nav.js
import React from "react";
import {BrowserRouter as Router , Link } from "react-router-dom";
import './App.css';
function Nav(){
return(
<Router>
<nav>
logo
<Link to="/about">
About
</Link>
<Link to='/shop'>
shop
</Link>
</nav>
</Router>
)
}
export default Nav
this is my About.js
import React from "react";
function About(){
return(
<div>
About Page
</div>
)
}
export default About
You should either wrap the App component with BrowserRouter or, wrap the App component with Router component that accepts a history prop.
Index.js
import { BrowserRouter } from 'react-router-dom'
ReactDOM.render(<BrowserRouter>
<App />
</BrowserRouter>,document.getElementById("root"));
App.js
import React from 'react';
import Nav from './Nav';
import { BrowserRouter as Router ,Switch, Route} from 'react-router-dom';
import About from './About'
function App() {
return (
<>
<Nav/>
<Switch>
<Route exact path='/about'>
<About/>
</Route>
</Switch>
</>
);
}
export default App;
Nav.js
import React from "react";
import {BrowserRouter as Router , Link } from "react-router-dom";
import './App.css';
function Nav(){
return(
<nav>
logo
<Link to="/about">
About
</Link>
<Link to='/shop'>
shop
</Link>
</nav>
)
}
export default Nav
Since, Nav.js and other components using Routes are wrapped within the app component which is further wrapped within BrowserRouter in index.js, you don't need to include Router in each component having Route or Link components.
I'm trying to create a e-commerce web app by following an online tutorial on Udemy but I have run into an error that I cannot seem to fix even though I have done everything the tutorial has done and theirs is working fine.
The error I am getting is telling me to Check the render method of Header
Which I have done and it is the same as the working tutorial.
This is my index.js file where the error is:
import React from 'react';
import 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')
);
And this is my header component
import React from 'react';
import { Link } from 'react-router-dom';
import { ReactComponent as Logo } from '../../assets/crown.svg';
import './header.styles.scss';
const Header = () => (
<div className="header">
<Link className="logo-container" to="/">
<Logo className="logo" />
</Link>
<div className="options">
<Link className="option" to="/shop">SHOP</Link>
<Link className="signin" to="/shop">SIGN IN</Link>
<Link className="option" to="/contact">CONTACT</Link>
</div>
</div>
)
export default Header;
This is my App.js
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import './App.css';
import HomePage from './pages/homepage/homepage.component';
import ShopPage from './pages/shop/shop.component';
import SignInSignUpPage from './components/sign-in-sign-up/sign-in-sign-up.component';
import Header from './components/header/header.component';
import { auth } from './firebase/firebase.utils';
class App extends React.Component {
constructor() {
super();
this.state = {
currentUser: null
};
}
componentDidMount() {
auth.onAuthStateChanged(user => {
this.setState({ currentUser: user });
});
}
render() {
return (
<div>
<Header />
<Switch>
<Route exact path='/' component={HomePage} />
<Route path='/shop' component={ShopPage} />
<Route path='/signin' component={SignInSignUpPage} />
</Switch>
</div>
);
}
}
export default App;
I can not seem to figure out how to solve this issue.
Got a floating period in here...
<Link className="option". to="/contact">CONTACT</Link>
I've been working on a react single page app and have been trying to get the routing to work.
I believe the routing itself actually works however the page does not load the correct content unless the page is manually reloaded. Back and forward browser arrows also work.
For example I can navigate to localhost:3000 fine and the content is loaded correctly but when I press a button to navigate to localhost:3000/contacts nothing is displayed unless I refresh the page. Once manually refreshed the contacts page shows up. What gives?
index.tsx
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom';
// Import App component
import App from './App'
// Import service workers
import * as serviceWorker from './serviceWorker'
// Render App component in the DOM
ReactDOM.render(
<Router>
<App />
</Router>
, document.getElementById('root')
)
serviceWorker.unregister()
App.tsx
// Import necessary dependencies
import React from 'react'
import Routes from './Routes'
// Create App component
function App() {
return (
<div className="App">
<Routes />
</div>
)
}
export default App
history.tsx
import { createBrowserHistory as history} from 'history';
export default history();
Home/Home.tsx
import React, { Component } from "react";
import history from './../history';
import "./Home.css";
export default class Home extends Component {
render() {
return (
<div className="Home">
hello home
<button onClick={() => history.push('/Contact')} value='click here'>Get Started</button>
</div>
);
}
}
Contact/Contact.tsx
import React, { Component } from 'react';
class Contact extends Component {
render() {
return (
<div>
hello world
</div>
);
}
}
export default Contact;
Routes.tsx
import React, { Component } from "react";
import {BrowserRouter, Router, Switch, Route } from "react-router-dom";
import Contact from "./Contact/Contact";
import Home from "./Home/Home"
import history from './history'
export default class Routes extends Component {
render() {
return (
<div>
<Router history={history}>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/Contact" component={Contact} />
</Switch>
</Router>
</div>
)
}
}
Any help greatly appreciated
I think there's some extra code that might be causing conflict. You're defining the Router from react-router-dom twice:
Once here, in index.tsx
ReactDOM.render(
<Router> // here
<App />
</Router>
, document.getElementById('root')
)
and then again in Routes.tsx
<Router history={history}> // here
<Switch>
<Route path="/" exact component={Home} />
<Route path="/Contact" component={Contact} />
</Switch>
</Router>
You have to drop one of them, they're probably conflicting each other
Update
In addition to that, I think you should not use the history object directly from your export, but access it through the HOC withRouter. Then, you'd wrap
So you'd do something like this
import React, { Component } from "react";
import { withRouter } from 'react-router-dom'
import "./Home.css";
class Home extends Component {
const { history } = this.props
render() {
return (
<div className="Home">
hello home
<button onClick={() => history.push('/Contact')} value='click here'>Get Started</button>
</div>
);
}
}
export default withRouter(Home)
I think the issue here is that you need to wrap your pages with withRouter() like so:
import React, { Component } from "react";
import history from './../history';
import "./Home.css";
import { withRouter } from 'react-router-dom'; //<---------- add this
class Home extends Component {
render() {
return (
<div className="Home">
hello home
<button onClick={() => history.push('/Contact')} value='click here'>Get Started</button>
</div>
);
}
}
default export withRouter(Home); //<-------------- and add this
You will need to do the same on your Contact page as well.
Why do you have two routers?
I guess you simply need to remove the Router either in index.tsx or in Routes.tsx
According to you file naming I would remove the Router in Routes.tsx
It seems like you are using the history package for navigation. If you are using the react-router v5, then you may have to downgrade the history package to 4.10.1 until the history package developers issue a new release with the fix. As of writing this, the latest release version of history package is v5.0.1, and if you see a new release than this, you can try with that version first to see if it works, before doing the downgrade to 4.10.1
Issue Link -> https://github.com/remix-run/history/issues/804
I am trying to use the react-dom-router package within my React app but I am not being "redirected" successfully to the component. It only works when I refresh the page or access via the URL.
This is my App.js:
import React, { Component } from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import NavMenu from "./components/NavMenu/NavMenu";
import Contact from "./components/Contact/Contact";
import Home from "./components/Home/Home";
class App extends Component {
render() {
return (
<Router>
<div>
<NavMenu />
<Route exact path='/' component={Home} />
<Route path='/contact' component={Contact} />
</div>
</Router>
);
}
}
export default App;
This is my NavbarMenu component's code:
import React, { Component } from "react";
import { Navbar, Nav } from "react-bootstrap";
import { BrowserRouter as Router, Link } from "react-router-dom";
class NavMenu extends Component {
render() {
return (
<Router>
<Navbar bg='light' expand='lg'>
<Navbar.Brand>Company name</Navbar.Brand>
<Nav className='mr-auto'>
<Nav.Link>
<Link to='/'>Home</Link>
</Nav.Link>
<Nav.Link>
<Link to='/contact'>Contact</Link>
</Nav.Link>
</Nav>
</Navbar>
</Router>
);
}
}
export default NavMenu;
I guess the code for Home & Contact components aren't relevant.
So, when I visit my React app default page http://localhost:3000/ I see the navbar with their links. But when I click in a link, the URL changes but nothing happens until I refresh the page or access from the URL.
I was following this tutorial to get this done. Any ideas?
Its s because you are using Router twice, first in App.js and then again in NavMenu. We only need to wrap the App container (entry point) with Router.
Remove the <Router> from NavMenu component. Write it like this:
import React, { Component } from "react";
import { Navbar, Nav } from "react-bootstrap";
import { Link } from "react-router-dom";
class NavMenu extends Component {
render() {
return (
<Navbar bg='light' expand='lg'>
<Navbar.Brand>Company name</Navbar.Brand>
<Nav className='mr-auto'>
<Nav.Link>
<Link to='/'>Home</Link>
</Nav.Link>
<Nav.Link>
<Link to='/contact'>Contact</Link>
</Nav.Link>
</Nav>
</Navbar>
);
}
}
export default NavMenu;