I tried many different ways including having baseline on BrowserRouter and add line, initially I was using Switch but soon realised that npm 6.0 onwards has changed it to Routes, so I downgrade it to npm 5.2.3. However, a blank screen still persists.
Hope to get suggestions from the experts here
this is my App.js
import logo from './logo.svg';
import './App.css';
import {Home} from './Home';
import {Department} from './Department';
import {Employee} from './Employee';
import {Navigation} from './Navigation';
import { BrowserRouter, Switch, Route } from "react-router-dom";
function App() {
return (
<BrowserRouter basename='/index.html'>
<div className="container">
<h3 className="m-3 d-flex justify-content-center">
React JS Tutorial
</h3>
<Navigation/>
<Switch>
<Route path='/' component={Home} exact/>
<Route path='/department' component={Department}/>
<Route path='/employee' component={Employee}/>
</Switch>
</div>
</BrowserRouter>
);
}
export default App;
This is index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();
I remember running into this issue, try the code, it might not work but I think you can't have any other component within BrowserRouter, hopefully that gives you at least a direction.
function App() {
return (
<BrowserRouter basename='/index.html'>
<Switch>
<Route path='/' component={Home} exact/>
<Route path='/department' component={Department}/>
<Route path='/employee' component={Employee}/>
</Switch>
</BrowserRouter>
);
}
Related
I am having a react-router problem in production build. Every thing works fine in development, but whenever I build a production using npm run build and then open the index.html file in the build folder, I only get the Header and Footer portion of the website, and when I try navigating to the links on the header I get an error that says "your file could not be accessed". Navigating to the Home link takes me to the c: directory on computer instead of just reloading the page I was on.
I have no idea what's going on. But I believe it might be from the Router.
Thank you.
Here is the code:
router.js
import {
BrowserRouter,
Routes,
Route,
} from 'react-router-dom';
import Home from '../components//pages/home';
import Infra from '../components/pages/infra';
import Outreach from '../components/pages/outreach';
import AboutUs from '../components/pages/aboutUs';
import ProgressOfWork from '../components/pages/progressOfWork';
const Router = () =>
<BrowserRouter basename=''>
<Routes>
<Route exact path="/" element={<Home />} />
<Route path="infra" element={<Infra />} />
<Route path="outreach" element={<Outreach />} />
<Route path="aboutUs" element={<AboutUs />} />
<Route path="progressOfWork" element={<ProgressOfWork />} />
</Routes>
</BrowserRouter>
export default Router;
App.js
import Router from './routes/routes';
import Header from './utilities/header';
import Footer from './utilities/footer';
function App() {
return (
<div>
<Header />
<Router />
<Footer />
</div>
);
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
at app.js I don't know if I miss something or implementing router incorrectly. But I quite confident that is correct. feel free to ask me if you have more question and I would give more direct answer as I can
import React from 'react';
import './App.css';
import {
BrowserRouter as Router ,Routes ,Route
} from 'react-router-dom';
import Home from './pages/main';
import PremiumPage from './pages/premium';
import ContactPage from './pages/contact';
import CreatingAccountPage from './pages/process';
import ProfileEditPage from './pages/profile';
import ChatPage from './pages/chat';
import ListPage from './pages/listUsers';
import PrivacyPage from './pages/privacy';
import { AuthContextProvider } from './Context/AuthContext';
function App() {
return (
<Router>
<AuthContextProvider>
<Routes>
<Route path='/' element={<Home/>} exact />
<Route path='/premium' element={<PremiumPage/>} />
<Route path='/contact' element={<ContactPage/>} />
<Route path='/process' element={<CreatingAccountPage/>} />
<Route path='/profile' element={<ProfileEditPage/>} />
<Route path='/chat' element={<ChatPage/>} />
<Route path='/listUsers' element={<ListPage/>} />
<Route path='/privacy' element={<PrivacyPage/>} />
</Routes>
</AuthContextProvider>
</Router>
);
}
export default App;
and index.js
import React from 'react';
import App from './App';
import { createRoot } from 'react-dom/client';
import './index.css';
const root = createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
I used ReactJS a year ago only once just for a small project, however, now I have a problem setting the navigation. The navigation on the old project it's working, I found out there is a new version of react-router-dom, I tried to implement the changes into the code but still, it doesn't work. I don't have a clue why :( any hint is appreciated. Thank you!
Console error:
Uncaught Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.
The above error occurred in the <Route> component:
App.js:
import React from 'react';
import { BrowserRouter as Routes, Route } from "react-router-dom";
import {Nav} from './Nav';
import { Posts } from './Posts';
export function App() {
return (
<div className="App">
<Nav/>
<BrowserRouter>
<Routes>
<Route path="/" element={<App/>}/>
<Route path="/posts" element={<Posts/>}/>
</Routes>
</BrowserRouter>
</div>
);
}
Nav:
import React from 'react';
import {Link} from 'react-router-dom'
import Logo from '../images/Logo.png';
export function Nav(){
return(
<div id="nav">
<img src={Logo} class="nav-logo" alt="logo"/>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/Posts">Posts</Link>
</li>
</ul>
</div>
)
}
index:
import React from 'react';
import ReactDOM from 'react-dom';
import {App} from './components/App';
import {BrowserRouter, BrowserRouter as Router, Route} from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<Router>
<Route path='/' element={<App/>}/>
</Router>
</BrowserRouter>
, document.getElementById("root"));
React-Router updated quite a lot, I recommended read the documentation and
don't do anything in the index.js file usually to routing in App.js file
import React from 'react';
import ReactDOM from 'react-dom';
import {App} from './components/App';
ReactDOM.render(
<App />
, document.getElementById("root"));
App.js file
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import {Nav} from './Nav';
import { Posts } from './Posts';
export function App() {
return (
<div className="App">
<BrowserRouter>
<Nav/>
<Routes>
<Route path="/posts" element={<Posts/>}/>
<Route path="*" element={<Navigate to="/posts" />} />
</Routes>
</BrowserRouter>
</div>
);
}
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"));
In my index.js file:
import React from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
import App from './App';
import Contact from './Contact';
import ReactDOM from 'react-dom';
//import RouterMapping from './RouterMapping';
const RouterMapping = () => (
<Router>
<Route exact path='/' component={App} />
<Route path='/contact' component={Contact} />
</Router>
);
ReactDOM.render(
<RouterMapping />,
document.getElementById('root')
);
When rendering the page /, it displays nothing (should go to App component per my understanding. The App component itself is running OK if I replace:
ReactDOM.render(
<RouterMapping />,
document.getElementById('root')
);
to
ReactDOM.render(
<App />,
document.getElementById('root')
);
Did I do something fundamentally wrong? Newbie to React...
Update on Mar 16
I think I figured out how to make the router work.
I have refactored my RouterMapping to RoutingConfig as below:
import React from 'react';
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom';
import Home from './Home';
import Contact from './Contact';
const RoutingConfig = () => (
<Router>
<div>
<Route exact path="/" component={Home}/>
<Route path="/contact" component={Contact}/>
</div>
</Router>
);
export default RoutingConfig;
Nothing peculiar.
Now, instead of rendering RoutingConfig in my index.js, I still render the App component in my index.js:
ReactDOM.render(
<App />,
document.getElementById('root')
);
The routing mapping is done now in App.js:
class App extends Component {
render() {
return (
<RoutingConfig />
);
}
}
Now it works. Please see attached screenshot:
My explanation
I think the key here is to demote the RoutingConfig to App.js. From index.js render App.js, App.js will act as the entry point to my whole app and determine which component (Home, Contact) to load based on routing.
Above for your information and hope it is helpful.