I am new to react js and I am trying to do page navigation with react-router-dom and I could not load the page even after trying many times.
index.js
import React from "react";
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
import { App } from './App'
const element= <App />;
ReactDOM.render(element, document.getElementById('root'));
App.js
import React from 'react'
import {Route, BrowserRouter as Router, Link} from 'react-router-dom';
import Home from './components/Home';
import Hello from './components/Hello';
export function App()
{
return(
<div>
<Router>
<div className='container'>
<div className='navbar-header'>
<ul className='nav navbar-nav'>
<li> <Link to={'./components/Home'}>Home</Link> </li>
<li><Link to={'./components/Hello'}>Hello</Link></li>
</ul>
</div>
</div>
</ Router>
</div>
);
}
src/components/Home.jsx
In Home.jsx, I am trying to get data from API and that page works fine.
Thanks.
You are using react router wrong way. Link is just Router's implementation of <a> tag... it just change your url and redirect your youter.. you need to specify Route which should be displayed:
export function App()
{
return(
<div>
<Router>
<div className='container'>
<div className='navbar-header'>
<ul className='nav navbar-nav'>
<li> <Link to={'/'}>Home</Link> </li>
<li><Link to={'/hello'}>Hello</Link></li>
</ul>
</div>
</div>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/hello" component={Hello} />
</Switch>
</ Router>
</div>
);
}
You have to set the Routes first for each page then only you will be able to navigate to the pages .
Please go through this resource resource.
This is a very good resource to follow .
I hope this solves your issue :)
Related
Actually, the problem is when I click on the link the browser don't get the page automatically I always need to refresh then it loads that page, I am new in react so is anyone know how I can rid of this. Thanks in advance
here is my navigation bar code
function MainNavigation() {
return (
<BrowserRouter>
<header>
<div>React Meets Up</div>
<nav>
<ul>
<li>
<Link to="/">AllMeetUp</Link>
</li>
<li>
<Link to="/newmeetup">New MeetUp</Link>
</li>
<li>
<Link to="/favorites">Favourite Page</Link>
</li>
</ul>
</nav>
</header>
</BrowserRouter>
);
}
export default MainNavigation;
here is my app.js code
import { BrowserRouter, Route } from "react-router-dom";
import { Routes } from "react-router-dom";
import MainNavigation from "./components/Layout/MainNavigation";
import AllMeetsUpPage from "./Pages/AllMeetUp";
import FavouritesPage from "./Pages/Favourite";
import NewMeetUpPage from "./Pages/NewMeetUp";
function App() {
return (
<div>
<MainNavigation />
<Routes>
<Route path="/" element={<AllMeetsUpPage />} />
<Route path="/newmeetup" element={<NewMeetUpPage />} />
<Route path="/favorites" element={<FavouritesPage />} />
</Routes>
</div>
);
}
export default App;
and finally here is my index.js code
import ReactDOM from "react-dom";
import {BrowserRouter} from 'react-router-dom';
import "./index.css";
import App from "./App.js";
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
I solve this problem by uninstalling the react-router-dom first and then install v5.2.0
I also remove the browser routing tag at the main navigation
I've been working with react router and its been giving me nothing but trouble. I want a button to load a new page, what I would like is to have a class to switch the file its rendering based on the link. I could be using the wrong thing but so any nudge in the right direction would be great.
here are my 3 main files
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import RouteFile from './RouteFile';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<RouteFile />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
RoutFile.js
import {
BrowserRouter as Router,
Switch,
Route
} from "react-router-dom";
import App from './App';
import Create from './Create';
function RouteFile() {
return (
<Router>
<Switch>
<Route path="/" children={<App />}/>
<Route path="/create" children={<Create />}/>
</Switch>
</Router>
);
}
export default RouteFile;
App.js
import './App.css';
import {
BrowserRouter as Router,
Link
} from "react-router-dom";
function App() {
return (
<Router>
<div className="App background">
<div className="container">
<li>
<Link className="button a" to="/create"><div className="button-container"><div className="icon new"></div><div className="text new-text">Create</div></div></Link>
</li>
<li>
<Link className="button a" to="/open">Open</Link>
</li>
<li>
<Link className="button a" to="/explore">Explore</Link>
</li>
</div>
</div>
</Router>
);
}
export default App;
Thanks again!
Issue
With the Switch component route order and specificity matter. "/" is a less specific path than "/create" and will be matched and rendered first.
You need only one Router in your app to provide the routing context for all nested route, switch, and link components.
Solution
Order more specific paths before less specific paths in RouteFile.
<Router>
<Switch>
<Route path="/create" children={<Create />}/>
<Route path="/" children={<App />}/>
</Switch>
</Router>
Remove the Router wrapping your links in App.
function App() {
return (
<div className="App background">
<div className="container">
<li>
<Link className="button a" to="/create">
<div className="button-container">
<div className="icon new"></div>
<div className="text new-text">Create</div>
</div>
</Link>
</li>
<li>
<Link className="button a" to="/open">Open</Link>
</li>
<li>
<Link className="button a" to="/explore">Explore</Link>
</li>
</div>
</div>
);
}
I'm working on React app and trying to deploy on IIS.
It works fine but the Router is not showing correctly.
My expected path when I click the link 'Test' is 'http://localhost/test/TestRouter/' but it displays 'http://localhost/TestRouter/' instead.
Here is my code:
App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Test from './Test';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
function App() {
return (
<div className="App">
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/TestRouter/">Test</Link>
</li>
</ul>
</nav>
<Route path="/TestRouter/" component={Test} />
</div>
</Router>
</div>
);
}
export default App;
Test.js
import React from 'react';
class Test extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<p>Test</p>
</div>
);
}
}
export default Test;
package.json:
"homepage": "/test/",
Then I deploy on IIS, under Default Web Site/test
My problem is when I click 'Test' link, the url now displays 'http://localhost/TestRouter/'.
My expectation is that the url should displays 'http://localhost/test/TestRouter/'.
Is there anyone here can help me to correct the Router?
Thank you in advanced.
You need to add basename to the Router:
<Router basename='/test'>
path="test/TestRouter"
There is option to fill the path directly
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/test/TestRouter">Test</Link>
</li>
</ul>
</nav>
<Route path="test/TestRouter" component={Test} />
</div>
</Router>
And option like the comment here
<Router basename='/test'>
<div>
<nav>
<ul>
<li>
<Link to="/TestRouter">Test</Link>
</li>
</ul>
</nav>
<Route path="/TestRouter" component={Test} />
</div>
</Router>
Did you sure you try this as it wrote?
error screenshotI am trying to include React-router in my React app , and i am using it in the navigation component, but after using it and initializing the path , my react app is crashing . Please refer code below :
Have tried writing according t react-router v4 syntax , the is used in the App.js file and the Link and Route have been used in Navigation.js component .
import React,{ Component } from 'react';
import { Route, Link } from "react-router-dom";
import './Navigation.css';
import App from '../../App';
import Create from '../pages/create/Create';
import List from '../pages/list/List';
class Navigation extends Component{
render(){
return (
<div>
<nav className="navbar navbar-expand-md navbar-dark bg-dark">
<Link className="navbar-brand mr-auto" to="/">HOME</Link>
<div id="navbarSupportedContent">
<ul className="navbar-nav">
<li className="nav-item active">
<Link className="nav-link" to="/Create">Create</Link>
</li>
<li className="nav-item" >
<Link className="nav-link" to="/List">List</Link>
</li>
</ul>
</div>
</nav>
{/* <Route path="/" exact component={App} /> */}
<Route path="/Create" component={Create} />
<Route path="/List" component={List} />
</div>
);
}
}
export default Navigation;
App.js:
import React, { Component } from 'react';
import Navigation from './js/navigation/Navigation.js';
import { BrowserRouter as Router } from 'react-router-dom';
class App extends Component {
render() {
return (
<Router>
<div className="App">
<Navigation/>
<div class="jumbotron text-center">
<h1 class="display-4">Welcome</h1>
<hr class="my-4"/>
<p>Please Click on Create to Create the Schema and on List to View the Schema.</p>
</div>
</div>
</Router>
);
}
}
export default App;
when i run the app and click on Create or List , respective components should be rendered but app is crashing when i run the react-app.
According to your crash screenshot, Your app is entering an infinite loop in your Create Component, please check your create component code
I am very new to react-routing. After reading the docs and reading some articles this is how structured my routing. Please correct me if I am doing wrong.
Using react-router V4
Routes.js
import React from 'react';
import App from '../app/components/App';
import Dashboard from '../dashboard/components/Dashboard';
import Contact from '../dashboard/components/Contact';
import Account from '../dashboard/components/Account';
import Career from '../dashboard/components/Career';
import NoMatch from './NoMatch';
import { Provider } from 'react-redux';
import { Route, BrowserRouter, Switch, Redirect } from 'react-router-dom';
const Root = ({ store }) => (
<Provider store={store}>
<BrowserRouter>
<div>
<Route path="/app" component={App} />
<Switch>
<Route path="/app" exact component={Dashboard} />
<Route path="/app/home/dashboard" component={Dashboard} />
<Route path="/app/home/contact" component={Contact} />
<Route path="/app/home/account" component={Account} />
<Route path="/app/home/career" component={Career} />
<Route component={NoMatch} />
</Switch>
</div>
</BrowserRouter>
</Provider>
)
export default Root
I used /app 2 times. First is to load always as it has sidenav and header. Then inside switch I used to load default component dashboard.
App.js
import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import 'font-awesome/css/font-awesome.min.css';
import Header from './Header';
import SideNav from './SideNav';
class AppComp extends Component {
componentDidMount() {
const { match: { params } } = this.props;
}
render() {
return (
<div>
<div className="container body">
<div className="main_container">
<Header />
<SideNav routeparams={this.props}/>
</div>
</div>
</div>
);
}
}
export default AppComp;
Sidenav.jsx
import React, { Component } from 'react';
import { NavLink } from 'react-router-dom'
import '../../css/sidenav.css';
class SideNav extends Component {
render() {
console.log(this.props.routeparams);
return (
<div className="col-md-3 left_col">
<div className="left_col">
<div className="clearfix"></div>
<div id="sidebar-menu">
<div className="menu">
<ul className="nav side-menu">
<li>
<NavLink to="/app/home/dashboard">Home</span></NavLink>
<ul>
<li className="current-page">
<NavLink to="/app/home/dashboard" activeClassName="current">Dashboard</NavLink>
</li>
<li>
<NavLink to="/app/home/contact" activeClassName="current">Contact</NavLink>
</li>
<li>
<NavLink to="/app/home/account" activeClassName="current">Account</NavLink>
</li>
<li>
<NavLink to="/app/home/career" activeClassName="current">Career</NavLink>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
);
}
}
export default SideNav;
I have two issue :
this.props.routeparams in sidenav logged twice which means sidenav rendered twice . this is happening after adding routing . Also this.props.routeparams match path is always /app, which I think because sidenav is a child component of app component. How can I fix this ? I want to get current route path in sidenav.
activeClassName="current" gets applied to correct navlink but the css style gets reflected only if I click somewhere in the page. Seems so strange. I can resolve that issue if I get current match.path at sidenav component then I will do it custom way without activeClassName.
Any help would be greatly appreciated.