i got this code working as expected (somewhat)
**App.js**
import React from "react";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
import "./App.css";
import MyForm from "./Recpayfrm";
function App() {
return (
// Code taken from https://reactrouter.com/web/guides/quick-start
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/Recpayfrm">MyForm</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav>
{/* A <Switch> looks through its children <Route>s and
renders the first one that matches the current URL. */}
<Switch>
<Route path="/Recpayfrm">
<MyForm />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
}
function Home() {
return <h2>Home</h2>;
}
function Users() {
return <h2>Users</h2>;
}
export default App;
but when the link MyForm is clicked, the results show at the bottom (ie the HOME area).
I would like a fresh page to rendered/displayed. See the input field at the pict.
How do i render/display a fresh page of the component MyForm in the Recpayfrm.js?
You can encapsulate all the routes that need to be in the "Home Area" (have the navbar list) inside a HomeComponent for instance.
And those who need a "fresh page" outside, like so:
// Every route here will also contain the navbar
function HomeComponent() {
return (
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/Recpayfrm">MyForm</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav>
<Switch>
<Route path="/users">
<Users/>
</Route>
<Route path="/">
<Home/>
</Route>
</Switch>
</div>
)
}
Now in your App component you will add all the routes that need to be rendered in their own page:
function App() {
return (
<Router>
<Switch>
<Route path="/Recpayfrm">
<MyForm/>
</Route>
<Route path="/">
<HomeComponent/>
</Route>
</Switch>
</Router>
)
}
Here it is in action
Related
I'm starting in React, and create a simple page Users and I would like to navigate between it and Home
| index.js
| components
| App.js
| Users.js
| Home.js
| Header.js
That's the structure that I defined:
Header.js:
<header>
<BrowserRouter>
<Link to="/users">Users</Link>
</BrowserRouter>
</header>
App.js:
< div >
<Router>
<Header />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/users" component={Users} />
</Switch>
</Router>
</div>
Index.js:
ReactDOM.render(
<App />,
document.getElementById('root')
);
It is not working, if I click in <Link to='users' /> does not work, but enter in URL localhost:3000/users the pages is redirected.
Solution
Remove <BrowserRouter> wrap from Link
<header>
<Link to="/users">Users</Link>
</header>
Change your code as follows
<BrowserRouter>
<Switch>
<Route path="/" exact component={Home}/>
<Route path="/usuarios" exact component={Users}/>
</Switch>
</BrowserRouter>
import {Link} from "react-router-dom";
import Users from './Users';
class Header extends Component {
render() {
return (
<header>
<div className="links">
<nav>
<ul>
<li><Link to="/usuarios">Users</Link></li>
</ul>
</nav>
</div>
</header>
)
}}
Official documentation
try move BrowserRouter in index.js file
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
I try to route my pages.. but when I copy some URL link from the page and want to show to other people.. They see 404 Page's not found..
I use this simple code of React:
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
export default function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav>
{/* A <Switch> looks through its children <Route>s and
renders the first one that matches the current URL. */}
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
}
function Home() {
return <h2>Home</h2>;
}
function About() {
return <h2>About</h2>;
}
function Users() {
return <h2>Users</h2>;
}
I have more pages.. but when I copy/paste a URL address without some pages is show.
How can I fix that ?
this depends on the router version used. example for version 4.
i create codepen https://codepen.io/romanown/pen/ZEQjrXm and its worked. changed to working on codepen when i go to menu labels. but going by web address not worked on codepen. for it need real local or network server or hosting.
those who put a minus at least write for what.
html
<div id="app"></div>
js
const {
BrowserRouter,
Switch,
Route,
Link
} = ReactRouterDOM
function Home() {
return <h2>Home</h2>;
}
function About() {
return <h2>About</h2>;
}
function Users() {
return <h2>Users</h2>;
}
const App = () => (
<BrowserRouter>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav>
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</BrowserRouter>
)
ReactDOM.render((
<App />
), document.getElementById('root'))
consider the following example, I have a login page and an admin page. After logging in we will be redirected to admin page.
The admin page is shown as follows.
Desired behaviour: To render cars component in the admin component itself
Actual behaviour: On clicking cars or bikes component they are being rendered on a different page.
code is as follows
App.js
//imports here
function App() {
return(
<Router>
<Switch>
<Route exact path="/" component={Login} />
<Route exact path="/admin" component={Admin} />
<Route exact path="/cars" component={Cars} />
<Route exact path="/bikes" component={Bikes} />
</Switch>
</Router>
);
}
Admin.js
//imports here
const Admin = () => {
return (
<Fragment>
<div className="is-flex">
<Sidebar />
<Navbar />
</div>
</Fragment>
);
};
navbar.js
// imports here
const Sidebar = () => {
return (
<aside className="aside">
<p className="menu-label">Test Routes</p>
<ul className="menu-list">
<li>
<Link to="/cars">Cars</Link>
</li>
<li>
<Link to="/bikes">Bikes</Link>
</li>
</ul>
</aside>
);
};
Using react-router-dom ^5.1.2
Tried this but not able to understand what I missed? how to solve this problem?
Move your default route to the bottom of the stack. i.e.
function App() {
return(
<Router>
<Switch>
<Route path="/admin" component={Admin} />
<Route path="/cars" component={Cars} />
<Route path="/bikes" component={Bikes} />
<Route exact path="/" component={Login} />
</Switch>
</Router>
);
}
my name Rajdeep Singh. I'm using react-router-dom in my react project. when clicking on the Link tag, Link tag not work.im don't understand why not working.
in-browser change URL but a component, not change on the web app
check my code
This my Main.js Component file code
import React, { Fragment } from 'react';
import Foot from './Footer';
import Head from './Header'
import MainContect from './MainContect';
import About from './page/About';
import Book from './page/Book'
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
function Main() {
return (
// use Fragment
<Fragment>
{/* use BrowserRouter as Router */}
<Router>
{/* out Router use Head componet */}
<Head />
{/* use Switch tag */}
<Switch>
{/* use Route defined Router path */}
<Route path="/" exact >
{/* compnent name */}
<MainContect />
</Route>
<Route path="/book" >
<Book />
</Route>
<Route path="/about" >
<About />
</Route>
</Switch>
{/* out Router use Head componet */}
<Foot />
</Router>
</Fragment>
)
}
export default Main
This my Header.js component file code
import React from 'react';
import './css/header.scss';
import { BrowserRouter as Router, Link } from 'react-router-dom';
function Head() {
return (
// Use Router tag wrap all Link in Router
<Router>
<header>
<h1 className='logo'> Sikh Book</h1>
<div className="iconArea">+</div>
<ul className="ulArea">
<li>
{/* Use Link tag for navigation */}
<Link to="/"> Home </Link> </li>
<li>
<Link to="/book">
Book
</Link>
</li>
<li>
<Link to="/about">
About
</Link>
</li>
</ul>
</header>
</Router>
)
}
export default Head
Plz tell whats my mistake
thank for helping me
You should initiate the BrowserRouter only once. I'd do this at a high level of your component tree. You could look at this example.
// BrowserRouter is the router implementation for HTML5 browsers (vs Native).
// Link is your replacement for anchor tags.
// Route is the conditionally shown component based on matching a path to a URL.
// Switch returns only the first matching route rather than all matching routes.
import {
BrowserRouter as Router,
Link,
Route,
Switch,
} from 'react-router-dom';
import React from 'react';
const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;
// We give each route either a target `component`, or we can send functions in `render` or `children`
// that return valid nodes. `children` always returns the given node whether there is a match or not.
const App = () => (
<Router>
<div>
<Link to="/">Home</Link>{' '}
<Link to={{pathname: '/about'}}>About</Link>{' '}
<Link to="/contact">Contact</Link>
<Switch>
<Route path="/" component={Home} />
<Route path="/about" component={About} />
<Route
path="/contact"
render={() => <h1>Contact Us</h1>} />
<Route path="/blog" children={({match}) => (
<li className={match ? 'active' : ''}>
<Link to="/blog">Blog</Link>
</li>)} />
<Route render={() => <h1>Page not found</h1>} />
</Switch>
</div>
</Router>
);
Credits to: siakaramalegos
See I'm trying to setup a react-router app. I have /parties, the list of all parties and then I have /parties/:id which give me a detail page of a party and /parties/create where I have a form to create a party.
Now, I'm trying to have my main resource always on the left side of my screen and my sub-resource always on the right side of my screen.
This is how I set it up:
return <div>
<div>
<nav>
<h1>Gamevote</h1>
<AuthWidget authService={this.authService}/>
</nav>
<div class="content cnt" ref={this.content}>
<this.PrivateRoute path="/" exact component={() => <Redirect to="/parties"/>} />
<Route path="/register" exact component={() => <Register/>} />
<Route path="/login" exact component={() => <Login authService={this.authService}/>} />
<this.PrivateRoute path="/parties/:selectedParty?" component={this.AutowiredPartyList} />
</div>
<div class="big-content cnt" ref={this.bigContent}>
<this.PrivateRoute path="/party/create" partyService={this.partyService} exact component={() => <this.AutowiredCreateParty/>}/>
<this.PrivateRoute path="/parties/:party" exact component={PartyView}/>
</div>
<this.PrivateRoute path="/logout" exact component={this.Logout}/>
</div>
</div>
}
But now when I go to /parties/create a create party form and a party detail with id party show up.
Is there a way to exclude /parties/create from the match /parties/:id ?
If you want to have both /parties/create and /parties/:id change the order:
path="/parties/create" (first)
path="/parties/:id" (last)
If another path with /parties/:something? exists before it will enter this route.
Thats because "/parties/:id" matches anything after /parties/#####
Also note you will have to add the Switch component so only one path is rendered at time.
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
function Index() {
return <h2>Home</h2>;
}
function About() {
return <h2>About create</h2>;
}
function AboutId() {
return <h2>About with ID</h2>;
}
function Users() {
return <h2>Users</h2>;
}
function AppRouter() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/users/">Users</Link>
</li>
<li>
<Link to="/about/create">About</Link>
</li>
<li>
<Link to="/about/1">About with id</Link>
</li>
</ul>
</nav>
<Switch>
<Route path="/" exact component={Index} />
<Route path="/users/" component={Users} />
<Route path="/about/create" component={About} />
<Route path="/about/:id" component={AboutId} />
</Switch>
</div>
</Router>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<AppRouter />, rootElement);
https://codesandbox.io/s/withered-lake-o9kx4