I'm using react router to navigate through my application, but I don't want react router to make a call to the server, is that possible?
You should use Hash history.
import { Router, Route } from 'react-router'
import createHashHistory from 'history/lib/createHashHistory'
<Router history={ createHashHistory({ queryKey: false }) }>
<Route path="/" component={App} />
</Router>
If you don't want to use the hash history (which appends a # to the url), use the Link Component which will correctly navigate the App based on the history type passed.
Related
Following problem:
const history = createBrowserHistory()
render() {
return (
<Router history={history}>
<WButton history={history}/>
<Switch>
<Route exact path='/' component={Home}/>
<Route exact path='/next' component={Next}/>
When I do this.props.history.push("/next") in WButton Component it only updates the url not switches to Next Component. When I move WButton into Home Component everything works correctly but I'd like to keep WButton on top level. Is this somehow possible?
With createBrowserHistory({ forceRefresh: true }) it also works on top level but I don't want to reload page with each navigation step.
Found the solution:
I could just use export default withRouter(WButton) in the WButton Component instead of the standard export and then remove the manual injection of the history via the props.
Import is import { withRouter } from 'react-router-dom';
I have two apps within single-spa, one in React and other in Vue.
The React app uses history library for navigation. Below given are my React app files:
history.js
import { createBrowserHistory } from 'history'
export const history = createBrowserHistory({
basename: '/myapp,
forceRefresh: true
})
App.js
import React, {Component} from 'react';
import { Router, Switch, Route } from 'react-router-dom';
import history from ‘../history.js’;
class App extends Component {
constructor(props){
super(props);
}
render(){
return (
<Router history={history}>
<Switch>
<Route exact path="/user" component={User} />
<Route exact path="/" component={Home} />
</Switch>
<Router />
)
}
}
I face an issue when:
I’m at the path https://localhost:3000/myapp/user of React app and I switch to the Vue app (using navbar menu).
Now when I switch back to React app, the url shows https://localhost:3000/myapp which ideally should load my Home component.
But now the history still has the old location (https://localhost:3000/myapp/user) which then loads the old User component.
Is there a way to update history when the url changes?
I didn't find how to change history, but I want you to fix some grammar errors. Meybe fixing errors can help you.
history.js
export const history = createBrowserHistory({
basename: '/myapp, // basename: '/myapp',
forceRefresh: true
})
App.js
<Switch>
<Route exact path="/user" component={User} /> // <Route path="/user" component={User} />
<Route exact path="/" component={Home} />
</Switch>
I think this boils down to getting to routing mechanisms to work together. This is an interesting problem and I have two ideas that could work:
Idea 1: refresh the page
If you're okay with a full reload, refreshing the browser whenever you switch between Vue and React would probably reset the state in both routers so that they both read the initial state they loaded on and continue.
I would do this by assigning window.location.href = '/myapp' inside any event handler that would cause the transition to React. It should reload the browser and navigate to that page. This should work if your react app is loading at that path.
Idea 2: Use createMemoryHistory and sync it with Vue's router
Instead of feeding react-router a "browser router", you can instead pass it a "memory router". As the name implies, the memory router holds state in memory (instead of using the History API).
I'm thinking you can wire up the events from Vue's router to react-router's memory router and get them in sync like that. I think you can call history.push inside of Vue's global after hooks.
Something like this:
// 🔴 I have not tested this, take this as inspiration
const router = new VueRouter({/* ... */});
const history = createMemoryHistory({/* ... */});
router.afterEach(({fullPath}) => {
history.replace(fullPath, {fromVueRouter: true});
});
history.listen(location => {
if (location.state?.fromVueRouter) return;
router.replace(location.pathname);
});
In React Router V4, I have a NotFoundScreen component set up to current standards.
It will catch all completely unknown routes fine, but I'm wondering if there is a way to navigate to it without changing the browsers URL. The rest of the app uses typical history.push() URL changing behavior, so I'm not sure I can use the memoryHistory described here: React Router Without Changing URL
To highlight my problem, if a user does not exist, it would be convenient programmatically navigate to NotFoundScreen without changing the users incorrect URL so they could catch a typo or use the browser's back button.
import React from 'react'
import { BrowserRouter, Route, Switch } from "react-router-dom";
import UserScreen from './UserScreen';
import HomeScreen from './HomeScreen';
import NotFoundScreen from './NotFoundScreen';
const Routes = () => {
return (
<BrowserRouter>
<Switch>
<Route exact path='/user/:userID' component={UserScreen}/>
<Route exact path='/' component={HomeScreen}/>
{/*NotFoundScreen will pick up all unknown routes. I want
to navigate here without changing the URL*/}
<Route component={NotFoundScreen}/>
</Switch>
</BrowserRouter>
);
};
export default Routes;
I'm trying to run a project based on session timeout in reactjs.. But unfortunately an error occurs.. This is the error,
'react-router' does not contain an export named 'browserHistory'.
I think you're using React Router 4. It moves around some of those modules. You'll either need to migrate your code to use v4, or downgrade React Router in your package.json.
React router provides a migration guide here:
https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/migrating.md
I think you are using react-router latest version. In new version history managed by internally. you can just use like and history is avaliable in your component props like props.history
import React from 'react';
import { Route } from 'react-router';
import { HashRouter, Switch } from 'react-router-dom';
let RootApp = () => {
return (
<div>
<HashRouter>
<Switch>
<PrivateRoute path='/admin' component={AdminRoute} />
<Route path='/login' component={LoginComponet}></Route>
<Route path='/**' component={LoginComponet}></Route>
</Switch>
</HashRouter>
</div>
);
}
In my React-router-redux-redial application, we can use two url :
/accountId
/accountId/language
The language is optional.
When the language param is not set, we have to force the "fr" language.
Is there any possibility with react-router to foward automatically "/accountId" to "/accountId/fr" ?
The IndexRoute doesn't have any path attribut to force the url and the redirect function does not fit our needs, we want to see "/accountId/fr" in the url for some SEO reasons.
I tried to make a dispatch(push("/accountId/fr")) in the render function of my LandingCmp but it not works.
We use Redial (#provideHooks) to ensure a clean pre-render on server side.
Here is my current routing table :
<Route path='/'>
<Route path="error" component={ErrorsCmp} />
<Route path=":accountId">
<Route path=":langue">
<IndexRoute component={LandingCmp} />
</Route>
<IndexRoute component={LandingCmp} />
</Route>
</Route>
We use the following dependencies :
- "react-router-redux": "4.0.5"
- "react-router": "2.7.0"
You can import browserHistory and then use that to push to different routes dynamically. So you can check the params to find out if there is any parameter after accountId, if there isn't you can use:
browserHistory.push("/accountId/fr");
And to import browserHistory:
import {browserHistory} from 'react-router';
You can push url in the componentWillMount lifecycle method using the withRouter wrapper which is available in the newer versions of React Router (since version 2.4.0). More info: https://github.com/ReactTraining/react-router/blob/master/docs/API.md#withroutercomponent-options
The structure may look like as follows:
import { withRouter } from 'react-router';
class App extends React.Component {
componentWillMount() {
this.props.router.push('/accountId/fr');
}
render() {
// your content
}
}
export default withRouter(App);