I've used React Router like below:
<BrowserRouter>
<Switch>
<Route exact path="/" component={Login} />
<Route exact path="/home" component={HomeComponent}/>
</Switch>
</BrowserRouter>
When I use this.props.history.push("/home") or http://localhost:3000/home page is Moving to Home page, but the url is still http://localhost:3000/.
Routing is working and I am able to navigate to all pages, but in the Top URL bar it is showing http://localhost:3000/ always.
Any Idea why this happens?
Please check whether u have implemented any createBrowserHistory, if its there please remove it (assuming it's an implementation issue).
Try adding the BrowserRouter to your index.js instead of adding in the inner component.
ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.querySelector('#root'));
Related
I have some routing issues for my ReactJS application post deploying into a subdirectory in production domain.
I am placing the build files into directory www.xyz.com/folder1/appfolder/ on my website and my homepage attribute in package.json is set to the same path. I have also tried to use manifest.json "start_url": "./dashboard" And my application file has route defined as below
<Route exact path="/" component={DashboardPage} />
Expected: When I run on localhost everything works fine as in the default page is the dashboard page when I visit localhost. But in production when I visit
www.xyz.com/folder1/appfolder/
i expect the dashboard page to load up but it doesn't load but a blank page comes up with all left nav, header, footer with no content. Once I click on Dashboard link in side nav then the page loads up but with this URL
www.xyz.com/appfolder/ (missing folder1 in path)
If I take this below path and visit directly then its broken as well
www.xyz.com/appfolder/
Only when I visit below and then click on side navbar dashboard link then it redirects to just app folder and the page loads up.
www.xyz.com/folder1/appfolder/
Kindly suggest as something really basic is missing due to which I am facing this problem. its a bad user experience.
Set basename prop in your BrowserRouter
<BrowserRouter basename='folder1'>
...routes...
</BrowserRouter>
Try using hashrouter instead of browser router.
So in your app.js (if this is where you have your routes defined)
Change the import like this
FROM
import { BrowserRouter } from 'react-router-dom'
...
<BrowserRouter>
<Switch>
<Route exact path="/" component={DashboardPage} />
....
</Switch>
</BrowserRouter>
TO
import { HashRouter } from 'react-router-dom'
...
<HashRouter>
<Switch>
<Route exact path="/" component={DashboardPage} />
....
</Switch>
</HashRouter>
There may be a better solution here than using regex, but not sure how to go about it.
The issue is that I want my navigation component that lives in a component called MainLayout to show on all routes except on /login & `/logout
Currently, I have the following 3 routes
<Route exact path="/logout" component={Logout} />
<Route exact path="/login" component={Login} />
<Route
exact
path="/:subdirectory?/:nested?/:id?/"
component={MainLayout}
/>
So navigating to /login or /logout will render either Login or Logout and also MainLayout which is understandable with the current setup.
However, is there a way to use regex (or any other means) to check that if /:subdirectory is either /login or /logout then do not render component?
I have a React App with Routers, I also have 404 component, etc.
But I don't know how to send 404 header to google bot.
I'mm just thinking that it's not possible due React app without SSR.
Am I right?
If you are using Router, you can set your pages like this:
<Router>
<Switch>
<Route exact path = "/home" component={HomePage} />
<Route exact path = "/sign-up" component={SignUpPage} />
<Route exact path = "/login" component={LoginPage} />
<Route exact path="/incorrect-login" component={IncorrectLoginPage} />
<Route exact path = "*" component={PageNotFound} /> //404 Component
</Switch>
</Router>
With this, you set your PageNotFound to the bottom of your router list where if the url of the React App does not correspond to any of your previous urls, then the PageNotFound route is triggered. You can just render your not found component under that page like you would for any other page in your application.
I also used exact so that the url must be exactly the same along with a Switch statement so that only a SINGLE page component can be triggered at once. The * basically just means ALL other urls besides those specified previously.
The PageNotFound is treated as kind of like a default catch statement so it's at the bottom
I have two routes, a base path and a customer route. The customer route takes a customerId parameter.
<HashRouter>
<Switch>
<Route path="/mapper/:mappingId/" exact component={Mapper}/>
<Route path="/" exact component={App} />
</Switch>
</HashRouter>
then in the react component I am calling it like this to navigate
window.open(`/customer/${customerId}`)
(updated, still doesn't work)
but when I navigate it just goes to the App component. I have to use HashRouter because the react app is wrapped in Electron. BrowserRouter works on the web
The url i get when i navigate is this:
http://localhost:3000/customer/ca023754-bb75-4f64-a19c-958525b53e12#/
I also tried adding backslash in Route, /customer/:customerId/, that didn't work as well
I have read How to use React Router with Electron? but it doesn't really work
I finally figured this out. Hashrouter expect the url to have "#/" after the basepath. so it should be window.open('#/customer/${customerId}')
I have several links throughout my react app that look like this:
<Route path="/linkpath" component={Whatever} />
or
<Link to="/linkpath">Click Me</Link>
Is there a quick/easy way to prefix all the links throughout the app with a predetermined string? ... perhaps via a Router configuration param?
So for example if my prefix is "/foo", all links to "/linkpath" would be converted to /foo/linkpath.
Note: Just to clarify, I'm using react-router-dom v4.0.0-beta.5
It turns out the Router in react-router-dom v4.0.0-beta.5 has a param called basename that addresses this scenario.
<Router basename="/foo">
<Link to="/linkpath">Click Me</Link>
<!-- other links here -->
</Router>
In this case, Click Me's link will be /foo/linkpath. So, as long as Router wraps all Components in the app, all links will be prefixed with basename.
One important note: Make sure the string in basename starts with a slash; i.e., use "/foo" instead of "foo". The latter one produces undesired behavior when clicking links (it appends the full link path to the existing URL everytime you click the link, instead of replacing it).
Using React Router, if you defined your routes using nesting like this:
<Router history={history}>
<Route path="/" component={App}>
<Route path="/hello" component={Hello} />
<Route path="/whatever" component={Whatever} />
</Route>
</Router>
Then you can simply change the path of the outermost Route component and it will add the prefix. In the case above, you could change it to:
<Router history={history}>
<Route path="/api" component={App}>
<Route path="/hello" component={Hello} />
<Route path="/whatever" component={Whatever} />
</Route>
</Router>
And then all the nested routes will be at /api/hello, /api/whatever instead of the original /hello and /whatever.