React and Vue Syntax Comparison Side by Side Part2: Router

import { BrowserRouter, Switch, Route } from 'react-router-dom'; export default function App() { return ( <BrowserRouter> <div> <Switch> <Route path="/about" component={About} />  <Route path="/" component={Home} />  </Switch>  </div>  </BrowserRouter>  ); } 

const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar }, ]; const router = new VueRouter({ mode: 'history', routes, }); const app = new Vue({ router }).$mount('#app'); 

<div id="app"> <router-view></router-view> </div> 

import { BrowserRouter, Route } from 'react-router-dom'; function App() { return ( <BrowserRouter> <div> <Route path="/contact/:id" component={Contact} />  </div>  </BrowserRouter>  ); } ... import { useParams } from 'react-router-dom'; function Contact() { let { id } = useParams(); return ...; } 

const router = new VueRouter({ mode: 'history', routes: [{ path: '/contact/:id', component: Contact }], }); export default { computed: { id() { return this.$route.params.id; }, }, }; 

import { BrowserRouter, Route } from 'react-router-dom'; const App = () => ( <BrowserRouter> <div> <Route path="/tacos" component={Tacos} />  </div>  </BrowserRouter> ); ... import { Route } from 'react-router-dom'; const Tacos = ({ match }) => ( <div> {/* here's a nested Route, match.url helps us make a relative path */} <Route path={match.url + '/carnitas'} component={Carnitas} />  </div> ); 

const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, children: [ { path: 'profile', component: UserProfile, }, { path: 'posts', component: UserPosts, }, ], }, ], }); const User = { template: ` <div class="user"> <h2>User {{ $route.params.id }}</h2> <router-view></router-view> </div> `, }; 

<Link to={{ pathname: '/courses', search: '?sort=name', hash: '#the-hash', state: { fromDashboard: true }, }} > courses </Link> 

<router-link to="/courses">courses</router-link> 

<NavLink to="/react" activeClassName="react"> React </NavLink> 

<router-link to="/vue">vue</router-link> 

import { useLocation } from "react-router-dom"; function App() { const location = useLocation(); return ...; } 

import { withRouter } from "react-router"; class App extends React.Component { static propTypes = { location: PropTypes.object.isRequired }; render() { const { location } = this.props; return ...; } } export default withRouter(App); 

export default { computed: { path() { return this.$route.path; }, params() { return this.$route.params; }, query() { return this.$route.query; }, hash() { return this.$route.hash; }, fullPath() { return this.$route.fullPath; }, }, }; 

import { useHistory } from 'react-router-dom'; function HomeButton() { const history = useHistory(); function handleClick() { history.push('/home'); } return ( <button type="button" onClick={handleClick}> Go home </button>  ); } 

export default { methods: { toHome() { this.$router.push('/home'); }, toUser(id) { this.$router.push({ name: 'user', params: { userId: id } }); }, toRegister(id) { // /register?plan=private this.$router.push({ path: 'register', query: { plan: 'private' } }); }, }, }; 

<Link to="/courses" replace />; // or const history = useHistory(); function handleClick() { history.replace('/courses'); } 

<router-link :to="/courses" replace /> 

export default { methods: { toHome() { this.$router.replace('/home'); }, }, }; 

<Redirect to="/login" /> <Redirect from="/invoices" to="/invoices/dashboard" /> // push a new entry onto the history instead of replacing the current one. <Redirect push to="/somewhere/else" /> 

const router = new VueRouter({ routes: [{ path: '/a', redirect: { name: 'foo' } }], }); 

import { useHistory } from 'react-router-dom'; function App() { const history = useHistory(); useEffect(() => { const unlisten = this.props.history.listen(...); return () => unlisten(); }, []) return ...; } 

import { withRouter } from "react-router"; class App extends React.Component { static propTypes = { history: PropTypes.object.isRequired }; componentDidMount() { this.unlisten = this.props.history.listen(...); } componentWillUnmount() { if (this.unlisten && typeof this.unlisten === 'function') { this.unlisten(); } } render() { return ...; } } export default withRouter(App); 

const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { ... }) router.afterEach((to, from) => { ... }) 

const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { ... } } ] }) 

const Foo = { template: `...`, beforeRouteEnter (to, from, next) { ... }, beforeRouteUpdate (to, from, next) { ... }, beforeRouteLeave (to, from, next) { ... }, } 

export default function ScrollToTop() { const { pathname } = useLocation(); useEffect(() => { window.scrollTo(0, 0); }, [pathname]); return null; } 

const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { // return desired position if (savedPosition) { return savedPosition } else { return { x: 0, y: 0 } } } }) 

import loadable from '@loadable/component'; const LoadableComponent = loadable(() => import('./Dashboard.js'), { fallback: <Loading />, }); 

const Foo = () => import('./Foo.vue'); const router = new VueRouter({ routes: [{ path: '/foo', component: Foo }], });