I am building a app with React and Electron and am using React Router Dom for navigation (I am using the HashRouter as it will not be on a server in production). I am trying to open a new electron window and display a page made with React in it but I cannot figure out how to access a react router route using the file protocol because each page does not get its own html file. Does anyone know how I can access that route using the file protocol?
My home page is loaded into the app using this which works for the "/" route:
mainWin.loadURL(
isDev
? 'http://localhost:3000'
: `file://${path.join(__dirname, '../build/index.html')}`
)
I am trying to load a page into a second window which should use the "/settings" route.
settingsWin.loadURL(
isDev
? 'http://localhost:3000/settings'
: `file://${path.join(__dirname, '../build/index.html/settings')}`
)
Here are the paths that I have tried to use but none of them load the page:
`file://${path.join(__dirname, '../build/index.html:settings')}`
`file://${path.join(__dirname, '../build/settings')}`
`file://${path.join(__dirname, '../build/index.html/settings')}`
The way to access a React Router route locally would be to add "#/[page-name]" at the end of the index.html path because the HashRouter looks at the URL hash (URL fragment). So now my code looks like this:
`file://${path.join(__dirname, '../build/index.html#/settings')}`
Related
default url
opend url in browser
I need to use my custom URL, such as：https://www.test.com:3000/recipe-app
I am having this problem that whenever i try to visit the page localhost:3000/blog/test directly it returns a 404 error. But whenever i try to visit it using <Link> component it works fine.
This is my code <Link href={{ pathname: '/blog', query: {slug: 'test'} }} as="/blog/test"><a className="nav__link">Blog</a></Link>
and i have a file blog.js in my pages folder.
What's happening is that on the client, with the Link component, you are creating a link to the blog.js page by setting "/blog" as the pathname.
When you go directly to the URL/blog/test, Next.js will try to render the page on the server and to do so will look for the file /pages/blog/test.js. That file doesn't exist, and Next.js doesn't know that you want to load the blog.js page and set query.slug to to the second part of the URL.
To do this, you need to map that route on the server to load the page you want, and pull the params you want out of the URL.
The Next.js docs cover this in Server Side Support for Clean URLs by using express to setup a custom server.
You can view the full code to get it working there, but your custom route will look something like this:
server.get('/blog/:slug', (req, res) => {
const actualPage = '/blog'
const queryParams = { slug: req.params.slug }
app.render(req, res, actualPage, queryParams)
})
You'll have to use now.json to set up your routes. Also it is important to note that it's now that builds the route so visiting it on the client side wont work if you are using localhost. Build your project with now and it should work.
Also the "as" parameter would be as={{ pathname:/user/manage/${variable}}}
I have a React App which proxies requests to Django, and Django has allauth installed to manage social app login. But my app is SPA which uses react-router, so when I have a link like /accounts/github/login, it seems like it is only passed to router, not attempred to open correctly. How can I exempt some url mask from routing?
To redirect a route (page-URL) of your SPA to another page-URL -out of your SPA- use this:
<Route path='/login' component={() => window.location =
'https://example.com/somethingOutOfSPA'}/>
*works with router v3,v4
We have recently ported our application from monolithic RubyOnRails to React/Redux Framework.
We are facing a problem with react-router and google cached pages in the results of google. In this case we have a SPA(single page application), which uses react-router (via browserHistory). The problem here is that: google cached page is a page wrapper, where the URL differs by the URL defined in the router of the SPA. So, in this case the routing of the application falls to the definition of a page not found. And the cached result of SPA page by google, instead showing the content of the page, page is reloaded to /search (wrapper path).
React Router Version: 3.0.3
React Version: 15.4.2
Here is how we have handled the generic Urls:
<Route onEnter={hitTheServer}>
<Route path="*" component={Home} />
</Route>
hitTheServer definition:
const hitTheServer = (nextState, replace, cb) => {
const url = `https://${config.server.public.host}${nextState.location.pathname}`;
// Hit the server only on client side rendering. A hack to handle unimplemented pages
if (typeof window !== 'undefined') {
window.location = url;
} else {
cb();
}
};
Here, we are doing page reload because there are some of the links are still not implement by out SPA, so, on full page reload, these links are router to their respective server (rails or node) via nginx.
I build a website using angular js. But That is not a SPA. I use angular js for API calling and fetch some data only so now I want to do routing for custom URL of my HTML pages how will I do it ? I am serving my website using nodeJs. is there any configuration in node js to set custom URL of static website/routing.
For using the routes in nodejs you can use express.Router() module.It can be installed same as express and then you can define the routes on that.
For example :-
var adminRouter = express.Router();
adminRouter.get('/',function(req,res){
res.send('Here is the dashboard for my app');
});
adminRouter.get('/users',function(req,res){
res.send('Here is the menu to show all the users');
});
//Now to apply the routes to your app
app.use('/admin',adminRouter);
You can also route the middleware of your app and the url parameters separately