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={} />
Related
[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.
Im new at routing on react.JS, however I have been struggling because the simple products.jsx
should return a simple message when I click, but no one is displaying.
Index.JS code
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>
, document.getElementById('root'));
registerServiceWorker();
code at App.JS
import React, { Component } from "react";
import NavBar from "./components/navbar";
import { Route, Routes } from 'react-router-dom';
import Products from "./components/products";
import "./App.css";
class App extends Component {
render() {
return (
<div>
<NavBar />
<Routes>
<Route path= "/products" component={Products}></Route>
</Routes>
</div>
);
}
}
export default App;
nav.jsx
import React from "react";
const NavBar = () => {
return (
<ul>
<li>
Home
</li>
<li>
Products
</li>
<li>
Posts
</li>
<li>
Admin
</li>
</ul>
);
};
export default NavBar;
products.jsx code
const Product = () => {
return <h1>Products</h1>;
};
export default Product;
I dont know basically what i'm missing.
In react-router-dom v6 the Route components render their components on the element prop as JSX.
<Route path="/products" element={<Products />} />
If you are still using v5 and have just mixed up documentation, then in v5 use the Switch instead (Routes replaced Switch in v6) and use the component prop as you were.
<Switch>
<Route path="/products" component={Products} />
</Switch>
If you are using react-router-dom 6, you have to use element instead of component inside of each route like this:
<Routes>
<Route path= "/products" element={<Products/>}></Route>
</Routes>
if you are using react-router-dom 5, you have to use Switch instead of Routes, like this:
<Switch>
<Route path= "/products" component={Products}></Route>
</Switch>
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 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;
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>