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>
);
}
}
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>
);
}
}
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={} />
[index.js]
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";
import 'bootstrap/dist/css/bootstrap.min.css';
import clayful from 'clayful/client-js';
import axios from 'axios';
clayful.config({
client: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6ImE0Mzg5MjhjNWZkNjFiNzkwNzc5OTU3MGRiZmUyYzE5ZTQ...'
});
clayful.install('request', require('clayful/plugins/request-axios')(axios));
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
[App.js]
import logo from './logo.svg';
import React from 'react';
import './App.css';
import { Route, Router } from "react-router-dom";
import LandingPage from './pages/LandingPage/LandingPage';
import LoginPage from './pages/LoginPage/LoginPage';
import RegisterPage from './pages/RegisterPage/RegisterPage';
function App() {
return (
<Router>
<Route path="/" element={<LandingPage />} />
<Route path="/login" element={<LoginPage />} />
<Route path="/register" element={<RegisterPage />} />
</Router>
);
}
export default App;
React Error: You cannot render a inside another . You should never have more than in your app> error occurs. Give them a hand.
Is "react-router-dom" the problem?
Is it because of "react6" or do we need to downgrade to "react5"?
You're using two routers, as the error message suggests.
You have one in index.js:
<BrowserRouter>
And another in App.js
<Router>
Try it without the <Router> in App.js.
Both BrowserRouter and Router are considered to be routers. It looks like you may have a typo and should replace <Router> with <Routes> in App.js.
App.js in
Router -> Routes Change.
I'm learning React and am thinking how the hell do I create dynamic route
like partial pages in Angular.
Here is my top level App component
import React from 'react';
import Header from '../common/Header';
export default class App extends React.Component {
render() {
return (
<div>
<Header/>
//Render partial pages here e.g /dashboard, /users
</div>
);
}
}
My Route looks like this:
import React from 'react';
import {render} from 'react-dom';
import {Router, IndexRoute, Route, browserHistory} from 'react-router';
import App from './app/components/containers/App';
import Dashboard from './app/components/containers/Dashboard';
import Ecosystem from './app/components/ecosystem/Ecosystem';
import './assets/plugins/morris/morris.css';
import './assets/css/bootstrap.min.css';
import './assets/css/core.css';
import './assets/css/components.css';
import './assets/css/icons.css';
import './assets/css/pages.css';
import './assets/css/menu.css';
import './assets/css/responsive.css';
render(
<Router history={browserHistory}>
<Route component={App}>
<IndexRoute component={Dashboard}/>
<Route path="/ecosystem/:name" component={Ecosystem}/>
<Route path="*" component={Dashboard}/>
</Route>
</Router>,
document.getElementById('root')
);
Any idea please ?
Does this work?
import React from 'react';
import Header from '../common/Header';
class App extends React.Component {
render() {
return (
<div>
<Header/>
{this.props.children}
</div>
);
}
}
App.propTypes = {
children: React.PropTypes.node,
};
export default App;
I've just started with Meteor and React and most everything I've seen for routers points me to react-router. I've pulled some code from the simple-todos branch and set up a "/" route but keep getting the error router.js:347 There is no route for the path: /. The page shows the content but I don't understand why this error is showing. I've tried Googling for answers and I can't find anything to help me solve this. I've also tried creating <Link /> elements to have links send me to other pages and that doesn't work either.
Here is my code:
Routes.jsx
import React from 'react';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
import { render } from 'react-dom';
import Home from '../../ui/layouts/Home.jsx';
import SignUpPage from '../../ui/pages/SignUpPage.jsx';
export const renderRoutes = () => (
<Router history={browserHistory}>
<Route path="/" component={Home} />
</Router>
);
Home.jsx
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { Meteor } from 'meteor/meteor';
import { RouteHandler } from 'react-router';
import NavBase from '../components/nav/NavBase.jsx';
import Splash from '../components/home/Splash.jsx';
import Snapshot from '../components/home/Snapshot.jsx';
import FooterCTA from '../components/home/FooterCTA.jsx';
import JoinModal from '../components/accounts/JoinModal.jsx';
import LogInModal from '../components/accounts/LogInModal.jsx';
import '../stylesheets/bootstrap.min.css';
import '../stylesheets/style.css';
export default class Home extends Component {
render() {
return (
<div>
<NavBase />
<Splash />
<Snapshot />
<FooterCTA />
<LogInModal />
{this.props.children}
</div>
)
}
}
Home.propTypes = {
currentUser: React.PropTypes.object,
children: React.PropTypes.element,
};
main.jsx
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import { renderRoutes } from '../imports/startup/client/routes.jsx';
Meteor.startup(() => {
render(renderRoutes(), document.getElementById('app'));
});
Any help with this would be greatly appreciated! Been stuck for a while now and would like to be able to move on.
It looks like you have declared Home as your App layout, then you would have your routes below like this:
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="/another" component={Another}/>
</Route>
</Router>