I have an AngularJS background, and started to play around with React. I'm using the react-router and want have basically this setup:
Template
export default ( props ) => {
return (
<div>
<Navbar></Navbar>
{ props.children }
</div>
);
}
Routing in App.js
<Router>
<Route path="/" component={Template}>
<IndexRoute component={RestaurantRoulette} />
<Route name="workspace" path="workspace(/:workspace_id)" component={RestaurantRoulette}>
<Route name="run" path="run" component={Run}></Route>
</Route>
</Route>
</Router>
Navbar
<ul className="navigation">
<li>RestaurantRoulette</li>
<Link to="run">Run</Link>
<li>Save</li>
</ul>
What I want
When I am in localhost:8080/workspaces/444 I want to click on the Run Link, and navigate to localhost:8080/workspaces/444/run
What is the current status
If I manually type the url localhost:8080/workspaces/444/run, everything works fine. But when I click on the Link in the navbar, I get to localhost:8080/run.
Can somebody tell me how this works? How this is all connected?
I think the Link tag should be like that:
<Link to={'workspaces/' + this.props.workspace_id + '/run'}>Run</link>
you should get the workspace_id from path in Template, and pass it to the NavBar component
Related
I have a question about the React Router.
Now, I have a webpage with that looks like this:
As you can see there is another link on the page called "Custom Hooks".If I click on it, it will be shown something like this:
What I want now is to go to the a new page which the link shown in the image above, where the page will only shown me the "Example" and not the "This is UseState function" text.
In my code:
With my code, it cannot performs the route that I want to.
How can I fix this?
Thank you
This is happening because you seem to have misunderstood how the Switch component works. Think of it as a way of selecting what component to render based on the url. In the above code snippet,
<Link to="/Homepage"><Button>Back to Homepage</Button></Link>
<h1>This is UseState Function</h1>
<div>Example</div><Link to="/UseStatePage/UseStateFunction">Custom Hooks</Link>
is not under , meaning that whenever UseStateWebpage component is rendered, the Link, h1 and div with 'This is UseState Function' will always be rendered. If you want it to be rendered optionally based on the URL, there are multiple ways to achieve it. One way is as follows.
<Router>
<Switch>
<Route path="/UseStatePage" exact render={
()=>{
return(
<React.Fragment>
<Link to="/Homepage"><Button>Back to Homepage</Button></Link>
<h1>This is UseState Function</h1>
<div>Example</div><Link to="/UseStatePage/UseStateFunction">Custom Hooks</Link>
<React.Fragment>
)
}
}/>
</Switch>
<Switch>
<Route path="/UseStatePage/UseStateFunction" exact component={UseStateFunction}/>
<Switch>
<Router>
Neither the h1 nor div with example text are rendered into a route so they will always be rendered. Render the "homepage" content into its own route, something like the following.
function useStateWebPage() {
return (
<Router>
<Link to="/Homepage">Back To Homepage</Link>
<Switch>
<Route
path="/UseStatePage/UseStateFunction"
component={UseStateFunction}
/>
<Route path="/Homepage>
<h1>This is UseState function</h1>
<div>
Example
<Link to="/UseStatePage/UseStateFunction">custom Hooks</Link>
</div>
</Route>
</Switch>
</Router>
);
}
I am new to react. I am using react to list stores, when the user clicks on the store it will show just the menu and nothing else. The problem that I am facing is that everytime i click on a store the menu is shown right below the list of stores. I want it to be rendered as a new page with nothing but the menu. Is there a way i can do that with react router? Below is my code. Any help would be really appreciated
<Router>
<div> {stores.map((store) => (
<div><Link to="/storemenu"> {store} </Link> <br/></div>
))} <button onClick={()=>addStore()}>Add Store</button>
</div>
<Switch>
</Switch>
<Route exact path="/storemenu">
<StoreMenu/>
</Route>
</Router>
By rendering whatever outside of all Routes you automatically make it appear site-wide (on all routes).
If you don't want list of stores to appear on all pages - just render it inside some other Route.
If, on the other hand, you want list of stores to appear on some pages but not on some others (like /storemenu), render list of stores inside a Route & pass to this route an array of paths where list of stores should appear as path.
Then write another Switch inside this Route & handle other routing logic as needed.
Here is a minimalistic example that works:
import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
const App = () => {
const store = ["Berlin", "Moscow"];
return (
<>
<Router>
<nav> { /* This nav is visible on all pages */ }
<Link to="/some">
/some
</Link>
<Link to="/pages">
/pages
</Link>
<Link to="/storemenu">
/storemenu
</Link>
</nav>
<Switch>
<Route exact path={["/", "/some", "/pages"]}>
{ /* Stores are visible only on "/", "/some" & "/pages" */ }
{store.map((store) => {
return store;
})}
<Switch>
<Route path="/some">
A page with list
</Route>
<Route path="/pages">
Another page with list
</Route>
</Switch>
</Route>
<Route exact path="/storemenu">
Here is Store Menu with no stores list!
</Route>
</Switch>
</Router>
</>
);
};
export default App;
I`m beginner in React and I want to create page where I include a Navbar and Sidebar and the main to by changed by Sidebar link. How I do that?
exemple:
import Sidebar from '../Sidebar';
import Navbar from '../Navbar;
import {Page1,Page2,Page3} from './menu'
export default function UserPage(){
return(
<>
<Navbar />
<Sidebar />
<div>
//Here i want to component be loaded based on Navlink
</div>
</>
)
}
I found the problem!
If you keep the navbar or sidebar in path="/" don`t use exact in the route because when you will go to "/dashboard" he will not add them
Use a Router
For routing in react you can look up react router here
You then define your routes and that will fill your content based on url.
Example
See how this is like a normal react component, each route will load some specified components. Anything that exists on every page can be put outside of the Switch component. You cna see the Nav bar here that will exist on every page.
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>
);
}
I'm working on an user-list project made with React/ React Router for a community I'm part of and I've been running into a problem I can not find the root of.
I have a nested Router set up, to have a userlist appear on the click of a button (url/player) and then - in the userlist - have the profile of that user appear on a click on the name (url/player/:id). This works fine so far!
BUT:
When I'm on a user profile (url/player/:id) and click the link to get back to the userlist, it does not render the userlist-component - though the url in the browser itself changes back to (url/player).
I can't figure out how to make the general userlist reappear again and would surely appreciate some input.
Since the project has multiple components, I separated them into different files, where my problem my lay.
I still tried to reconstruct the instructions of different tutorials for nested Routes. Maybe I'm just overlooking something basic, but I cant seem to find it.
Main Navigation Router in the index.js
<Router>
<Navigation />
<div className="contentBox">
<Route path="/" exact component={Home} />
<Route path="/player" exact component={Playerlist} />
</div>
</Router>;
Userlist Router in the Playerlist-Component
<Router>
<Route path="/player" exact component={Playerlist} />
<Route path="/player/:id" component={Playerprofile} />
</Router>;
The weird thing is, only the Playerlist-Link does not work anylonger. If I click on either the "Home"-Link or any other Navigation, it works. So I assume it has something to do with the rerendering.
I'm sorry if this question seems obvious, I'm still a beginner and appreciate any help! Thank you!
You should improve the nested routing of your app:
No need to wrap PlayerList component with Router. Use Router only in root component.
Don't use Route to PlayerList component within the component itself.
Do use Route to PlayerList component in index.js, but without exact (so routing to '/player/:id' routes work).
Here are snippets of updated code:
App.js (in your case index.js):
export default function App() {
return (
<Router>
<Navigation />
<Route path="/" exact component={ Home } />
<Route path="/player" component={ PlayerList } />
</Router>
);
}
PlayerList.js
export default function PlayerList({ match }) {
return (
<div>
<h1>Player List</h1>
<Route path={`${match.path}/:id`} component={ PlayerProfile } />
</div>
);
}
PlayerProfile.js
export default function PlayerProfile({ match }) {
return <div>Player Profile { match.params.id }</div>;
}
Navigation.js (draft):
export default function Navigation() {
return <nav>
<Link to="/">Home</Link>
<Link to="/player">PlayerList</Link>
<Link to="/player/1">Player 1</Link>
<Link to="/player/2">Player 2</Link>
<Link to="/player/3">Player 3</Link>
</nav>;
}
Though I'd recommend to move the Links to "/player/:id" into PlayerList component.
You can find official notes on nested routing here. Hope that helps.
I'm using react router v4.2 and it looks like Redirect inside Switch does not trigger the component mounting. I'm not using any state management library so it's just pure react code and the bug looks like happens only in chrome!
This is my app component with routing:
const App = () => (
<section id="content">
<div className="container">
<Switch>
<Redirect exact from='/' to='/entries/voto'/>
<Route path="/entries/:order" component={EntryList}/>
</Switch>
</div>
</section>
)
export default App;
If I enter the website url with '/' the supplied url (/entries/voto) shows up in the browser but no lifecycle method is called, not even the constructor, so I believe nothing depends on the EntryList component, which does not implements the shouldComponentUpdate method.
i'm not sure but could you please change your code something like this
const App = () => (
<section id="content">
<div className="container">
<Switch>
<Redirect exact from='/' to='/entries/voto'/>
<Route path="/entries/:order" render={ props => <EntryList {...props}/>}/>
</Switch>
</div>
</section>
)
export default App;
i change component and replace it with render . in some scenario it's helpful
I had a similar issue. In my case, I had to put the Redirect element after the Route element.
Something like this works in my app.
return (<div>
<Route exact path="/login" component={LoginContainer}/>
{this.props.location.pathname !== '/login'&&
<Redirect exact from="/" to={"/login"} />
}
</div>);
Thanks everybody but it looked like it's a chrome cache issue! I tried the app in incognito mode and on a brand new chrome install and it worked fine.