I have problem with react router.
This is my Router:
<Router>
<div>
<Route exact path="/dashboard" component={projetList} />
<Route path="/dashboard/:id" component={
(props) => <Editor documentID={props.match.params.id} />
} />
</div>
</Router>
And Link to:
<Link to="/dashboard">
<button type="button" class="btn btn-outline-success">
</Link>
Problem description:
When I click my element - browser try to go to the http://localhost:3000/dashboard
but the site is blank.
When I refresh my site (F5 button) then my component load.
Also check out this link: Routes are not navigating when React v15.5 setup with react-redux v5 is. And make sure you put the in the right place. Check this for example :
<browserRouter>
https://pastebin.com/M9hU4Bg4
Related
Hello guys and welcome to the next episode of New to React so lets experiment! In this episode we present:
Trying display the Home component on application start.
I went with building the homepage in a different component, not sure if this is the right approach but I thought it would be nice to keep the App.js clean from all the html and such.
Doing this though, causes a problem it seems, as it does not seem to show the Home component on app boot (duh), instead it just displays a black page. In order to get to the hompage you need to click the navbar brand link in the Navigation since I've added a link for that.
class App extends Component {
render() {
return (
<BrowserRouter>
<div className="App">
<Navigation />
<div>
<div>
<h1>Some content</h1>
</div>
<div>
<Route exact path="/" component={Home} />
<Route path="/page1" component={page1} />
<Route path="/page2" component={page2} />
</div>
</div>
<Footer />
</div>
</BrowserRouter>
)
}
}
I think I could use a <Redirect> to redirect to the Home component but this seems like a workaround to me, rather than what should actually happen.
What would be a better way of doing this?
I've created an app via create-react-app. I want to use the HashRouter functionality for my app (React Router v4), but it is not working as expected.
Actually I don't know why. I.e. when I click on the contact link, then the URL changes to the route /contacts, but the related component is not being showed. It still shows the previous loaded component. The links are placed in the Navigation component. Here is one example of a Link.
<Link key={"navigation" + bu.name + "Key"}
to="/products"
className="nav-link dropdown-item imageLink animated"
onClick={(e) => this.handleClickBU(e, bu.bu)}>{bu.name}
</Link>
This is my code of App.js:
import React, { Component } from "react";
import {
BrowserRouter as Router,
HashRouter,
Route,
Link,
Switch
} from "react-router-dom";
<HashRouter>
<div>
<Background />
<div id="wrap">
<div id="main" className="container clear-top marginBottom50px main">
<div id="content">
<Navigation
key="navBar"
languagesToShow={this.state.languagesToShow}
currentLanguage={this.state.currentLanguage}
onLanguageChange={this.handleLanguageChange.bind(this)}
onBUChange={this.handleBUChange.bind(this)}
onIndustryChange={this.handleIndustryChange.bind(this)}
onCountryChange={this.handleCountryChange.bind(this)}
/>
<Route
key={"mainPageRoute"}
path={"/"}
exact={true}
render={(routeProps) => (
<MainPage
{...routeProps}
currentLanguage={this.state.currentLanguage}
country={this.state.countryObject}
contacts={this.state.contacts}
onCountryChange={this.handleCountryChange.bind(this)}
/>
)}
/>
<Route
key={"contactRoute"}
path={"/contact"}
exact={true}
render={(routeProps) => (
<ContactList
{...routeProps}
showCountrySelection={true}
currentLanguage={this.state.currentLanguage}
country={this.state.countryObject}
contacts={this.state.contacts}
onCountryChange={this.handleCountryChange.bind(this)}
key={"contactList"}
/>
)}
/>
<Route
key={"productsRoute"}
path={"/products"}
exact={true}
render={(routeProps) => (
<Products
{...routeProps}
ref={this.props.innerRef}
key="products"
isLoading={this.state.isLoading}
country={this.state.countryObject}
currentLanguage={this.state.currentLanguage}
currentBU={this.state.currentBU}
showMainProductGroups={this.state.showMainProductGroups}
showMainProductGroupDetails={
this.state.showMainProductGroupDetails
}
showProductGroupDetails={this.state.showProductGroupDetails}
mainProductGroups={this.state.mainProductGroups}
onShowMainProductGroupDetailsChange={this.handleShowMainProductGroupDetailsChange.bind(
this
)}
onShowProductGroupDetailsChange={this.handleShowProductGroupDetailsChange.bind(
this
)}
onBUChange={this.handleBUChange.bind(this)}
onCountryChange={this.handleCountryChange.bind(this)}
/>
)}
/>
</div>
</div>
</div>
</div>
</HashRouter>;
Can anyone tell me, why the url is updated, but the component not?
UPDATE
I already searched a lot and I found this link on the react training site.
I tried different things, but no one did not solve my problem.
But when I change HashRouter to Router it works fine!!! Why!?!
Can it be an issue / bug of HashRouter?
When I add a link inside of a bootstrap modal, the new page opens, but it doesnt open under the navbar, or above the footer, and it appears with a black transparent background (inherited from the modal component).
Ps: Navbar open pages perfectly.
<HashRouter>
<Navbar />
<Route exact path="/" component={Option}/>
<Route path="/finalizar3" render={ (props) => <Checkout1 shoppingCart={this.state.shoppingCart} } />
</HashRouter>
<Modal />
The component with the link:
<Link className="btn btn-primary" type="button" strict to="/finalizar1">Finalizar Compra</Link>
The modal is outside of HashRouter because I can access from any page I'd like. Therefore this modal is in the main page. Is there a workaround to make the link open the new page just like the navbar does?
It will work if you just put the Modal component inside of HashRouter, so that the Link component inside the modal will get the right history object from the context provided by the HashRouter.
<HashRouter>
<Navbar />
<Route exact path="/" component={Option} />
<Route
path="/finalizar3"
render={props => <Checkout1 shoppingCart={this.state.shoppingCart} />}
/>
<Modal />
</HashRouter>
I am learning React.js. I am using React router version 4.3.1 and React router dom 4.3.1.
My current app structure is given below.
<React.Fragment>
{/* sidebar component */}
<SideBar store = {Mystore} />
<div className="main-panel">
{/* navbar component */}
<NavBar store = {Mystore}/>
{/* content component */}
<Content store = {Mystore}/>
{/* footer component */}
</div>
</React.Fragment>
in my content component i have a Router set up as given below.
<BrowserRouter>
<React.Fragment>
<Route exact path="/phoenix/public" component={Login} />
<ProtectedRoute exact path="/phoenix/public/sample" component={SamplePage} />
<ProtectedRoute exact path="/phoenix/public/view_ticket" component={ViewTicket} />
<ProtectedRoute exact path="/phoenix/public/create_ticket" component={CreateTicket} />
<ProtectedRoute exact path="/phoenix/public/dashboard" component={Dashborad} />
</React.Fragment>
</BrowserRouter>
Here ProtectedRoute is a functional component which checks if the user is authenticated and returns a Route
My sidebar has some a tags like below.
<li>
<a href="dashboard">
<i className="ti-panel" />
<p>Dashboard</p>
</a>
</li>
My goal is to navigate to different Routes without page refresh on click from side bar. But clicking href reloads the page and all my state in my Mobx refreshes. I have tried to Redirect but could not get the Router which is stated in siblings component (content is siblings of sidebar). I have no idea how to achieve this.
As stated in the comments on your question, regular <a> tags will not work, and refresh the page. So you will need to use Link or NavLink.
If you want to make it work in your sidebar (child component) you will need to wrap the <BrowserRouter> around all the components where you want to use the routes.
For example like this (using your code):
<BrowserRouter>
<React.Fragment>
{/* sidebar component */}
<SideBar store = {Mystore} />
<div className="main-panel">
{/* navbar component */}
<NavBar store = {Mystore}/>
{/* content component */}
<Content store = {Mystore}/>
{/* footer component */}
</div>
</React.Fragment>
</BrowserRouter>
And your Sidebar will be something like this:
<React.Fragment>
<Link to="/dashboard">Dashboard</Link>
...
</React.Fragment>
Then in your content component. You need to delete the <BrowserRouter>
I fixed my problem by having BrowserRouter like below as suggested by #PreDinnerSnack.
<BrowserRouter>
<React.Fragment>
{/* sidebar component */}
<SideBar store = {Mystore} />
<div className="main-panel">
{/* navbar component */}
<NavBar store = {Mystore}/>
{/* content component */}
<Content store = {Mystore}/>
{/* footer component */}
</div>
</React.Fragment>
</BrowserRouter>
Then i used Navlink in My Sidebar component. Which fixed the problem of navigating to the desired route without page refresh. But then i faced another problem as Content was not Refreshing according to the route.
For that problem I found the observer HOC of Mobx was interfering with my router. I had to wrap my content with withRouter as below to fix this problem.
withRouter(observer(Content));
I hope my solution will come in handy for someone as i found no tutorial with the examples of React Router implementation like mine on the web.
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