I add Switch router component to my project in order to set default page.
When i build it gives the following error:
Error: Failed exporting HTML for URL About (src\pages\About.js): Invariant failed
- tiny-invariant.cjs.js:11 invariant
[byte-artisan]/[tiny-invariant]/dist/tiny-invariant.cjs.js:11:11
- history.min.js:1 Object.createBrowserHistory
[byte-artisan]/[history]/cjs/history.min.js:1:3626
- react-router-dom.min.js:1 new t
[byte-artisan]/[react-router-dom]/cjs/react-router-dom.min.js:1:1036
- react-dom-server.node.production.min.js:33 c
[byte-artisan]/[react-dom]/cjs/react-dom-server.node.production.min.js:33:323
- react-dom-server.node.production.min.js:36 Sa
[byte-artisan]/[react-dom]/cjs/react-dom-server.node.production.min.js:36:1
- react-dom-server.node.production.min.js:41 a.render
[byte-artisan]/[react-dom]/cjs/react-dom-server.node.production.min.js:41:467
- react-dom-server.node.production.min.js:41 a.read
[byte-artisan]/[react-dom]/cjs/react-dom-server.node.production.min.js:41:58
- react-dom-server.node.production.min.js:53 renderToString
[byte-artisan]/[react-dom]/cjs/react-dom-server.node.production.min.js:53:83
- exportRoute.js:127 renderToStringAndExtract
[byte-artisan]/[react-static]/src/static/exportRoute.js:127:21
- exportRoute.js:191 renderToStringAndExtract
[byte-artisan]/[react-static]/src/static/exportRoute.js:191:15
- runtime.js:62 tryCatch
[byte-artisan]/[regenerator-runtime]/runtime.js:62:40
- runtime.js:288 Generator.invoke [as _invoke]
[byte-artisan]/[regenerator-runtime]/runtime.js:288:22
- runtime.js:114 Generator.prototype.(anonymous function) [as next]
[byte-artisan]/[regenerator-runtime]/runtime.js:114:21
- exportRoute.js:52 asyncGeneratorStep
[byte-artisan]/[react-static]/lib/static/exportRoute.js:52:103
- exportRoute.js:54 _next
[byte-artisan]/[react-static]/lib/static/exportRoute.js:54:194
- next_tick.js:68 process._tickCallback
internal/process/next_tick.js:68:7
This doesn't happen when running the site (npm run start).
More odd, happens only when build the site, for some pages. The pages affected changes every build even if i don't change anything between builds.
Here the router declaration:
App.js
import React from 'react'
import {
BrowserRouter as Router,
Route,
Link,
Switch,
Redirect
} from 'react-router-dom'
//pages
import './app.css'
import About from './pages/About'
function page404() {
return (
<div>
<h2>page404</h2>
</div>
);
}
function App() {
return (
<Router>
<div>
<ul className="menu-bar">
<li>
<Link to="/about">About</Link>
</li>
</ul>
<Switch>
<Route path="/About" component={About} />
<Route component={page404} />
</Switch>
</div>
</Router>
)
}
export default App
Environment: react-static v6.3.6
remove Router like this
function App() {
return (
<div>
<ul className="menu-bar">
<li>
<Link to="/about">About</Link>
</li>
</ul>
<Switch>
<Route path="/About" component={About} />
<Route component={page404} />
</Switch>
</div>
)
}
export default App
because react-static-plugin-react-router has already wrappered it with Router
Related
I have an error when I deploy the project in Vercel.
My Error
https://nextjs.org/telemetry
info - Checking validity of types...
info - Creating an optimized production build...
Failed to compile.
./components/Footer.js
Module not found: Can't resolve 'next/Image' in '/vercel/path0/components'
Import trace for requested module:
./components/Layout.js
./pages/_app.js
> Build failed because of webpack errors
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Command "yarn run build" exited with 1
But in footer I write import Image from "next/Image";
My footer
import React from "react";
import Link from "next/link";
import Image from "next/Image";
import Logo from "../public/images/Logo.svg";
import { useRouter } from "next/router";
import EnvelopeIcon from "../public/images/envelope.svg";
import PhoneIcon from "../public/images/phone.svg";
import MapChecker from "../public/images/map-marker-check.svg";
const Footer = () => {
const router = useRouter();
return (
<footer>
<div className="footer-context container">
<div className="footer-navbar">
<div className="logo">
<Link href={"/"}>
<Image src={Logo} alt="GlobalSoft logo" />
</Link>
</div>
</div>
<div className="line"></div>
<div className="footer-info">
<div className="card envelope">
<a href="mailto:info#globalsoft.az">
<div className="card-image">
<Image src={EnvelopeIcon} alt="Envelope Icon" />{" "}
</div>
</a>
</div>
<div className="card phone">
<a href="tel:+994 99 894 45 05 ">
<div className="card-image">
<Image src={PhoneIcon} alt="Phone Icon" />{" "}
</div>
</a>
</div>
<div className="card address">
<a target="_blank" rel="noopener noreferrer" href="https://goo.gl/maps/FzvbQnQEtpZCPKLm8">
<div className="card-image">
<Image src={MapChecker} alt="Map Check Icon" />{" "}
</div>
</a>
</div>
</div>
</div>
</footer>
);
};
export default Footer;
The Image component requires width and weight to be specified.
How can use transitions in __layout for loading a page with animation?
__layout.svelte :
<script>
import Header from '$lib/Header/index.svelte'
import Footer from '$lib/Footer/index.svelte'
import '../../app.css'
import Animate from '$lib/Animate.svelte'
</script>
<Header />
<div class="bg-gray-100">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<Animate>
<slot />
</Animate>
</div>
</div>
<Footer />
Animate.svelte :
<script>
import { fade, fly } from 'svelte/transition'
</script>
<div in:fly={{ y: 200, duration: 2000 }} out:fade>
<slot />
</div>
in this example transitioning effects only works for one time and shows animation. but I'd like to show transition every time that page changes!
Is there a solution to improve this app?
For this you need to use the {#key} block in combination with some variable that updates when you want it to. You can use page from $app/stores for that.
__layout.svelte:
<script>
import Header from '$lib/Header/index.svelte'
import Footer from '$lib/Footer/index.svelte'
import '../../app.css'
import Animate from '$lib/Animate.svelte'
import { page } from '$app/stores' // <-- new
</script>
<Header />
<div class="bg-gray-100">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<!-- The key's content is destroyed and recreated everytime the $page
variable changes -->
{#key $page}
<Animate>
<slot />
</Animate>
{/key}
</div>
</div>
<Footer />
Docs for $app/stores: https://kit.svelte.dev/docs#modules-$app-stores
Docs for {#key}: https://svelte.dev/docs#key
New to Flutter,
I know below question can archive similar goal, but is any other easy way to do so?
how flutter work with single page web and different route url?
here is react example:
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/users">Users</Link>
</li>
</ul>
</nav>
{/* A <Switch> looks through its children <Route>s and
renders the first one that matches the current URL. */}
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/users">
<Users />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</div>
</Router>
);
Yeah, sure there is.
The point is that you would have to use an external package.
It's simple to use and you can pass state from URL and vice versa.
You would have to implement 2 methods, one for the URL to state and the other for the opposite.
SimpleUrlHandler(
urlToAppState: (BuildContext context, RouteInformation routeInformation) {
// This is called when a user enters a url or presses the forward/backward
// button. You should update your app state according to the RouteInformation.
},
appStateToUrl: () {
// This is called when the url should be updated
// You must return a RouteInformation
},
child: YourAppWidget(),
);
I am learning MeteorJS, React and React-Router and I am having difficulty passing a parameter in the URL through the router. I have searched for the answer and I cannot find what I am doing wrong:
In my Routes.jsx file ('lists' is my MongoDB collection):
render: function() {
return (
<Router history={browserHistory}>
<Route path='/' component={Navbar}>
<Route path='/home' component={Home} />
<Route path='/register' component={Register} />
<Route path='/login' component={Login} />
<Route path='/listpages/:listId' component={ListPages} />
</Route>
</Router>
);
}
and in my MyLists.jsx file (inside the component):
renderLists() {
return this.data.lists.map((myList) => {
return
<li key={myList._id}>
<Link to='listpages' params={{ listId: myList._id}}>
{myList.name}
</Link>
</li>;
});
},
render() {
return (
<div>
<h2>Lists</h2>
<AddList />
<ul>
{this.renderLists()}
</ul>
</div>
);
}
When I click on one of the links for ListPages, I get the console error:
Warning: Location "listpages" did not match any routes
Also, the correct listId is embedded in the line item, but not the URL:
<li>
<Link to="listpages" params={listId: "qksabGvfeuf5PdaJv"} onlyActiveOnIndex=false...>
<a params={listId: "qksabGvfeuf5PdaJv" className="" style={}...>Inbox</a>
</Link>
</li>
But if I remove the parameter to this:
<Route path='/listpages' component={ListPages} />
then it works as expected and the contents of ListPages is displayed (right now it's only a heading to see if I get there). So ListPages does exists, but not when I pass the parameter. What am I doing wrong?
Thank you in advance for any help you can provide!
For anyone that may have stumbled upon this page doing a Google search:
This question may have been asked prior to the current version of React Router, but the correct way to do links with path='/route/:id' is to do <Link to={'/route/' + id} where the id is the thing you want to display. Since you're missing the key id part, you're getting an error.
For example, I want to show a table with a specific ID that I get as a prop.
Routes.jsx:
...
<Route path='/DisplayTable/:tableId' component={ Comp } />
...
Component I am going to display the table from (SelectTable.jsx):
...
<Link to={'/DisplayTable/' + this.props.tables[i]._id} />
...
You can pass your query parameter like this,
<Link to={{ pathname: 'listpages', query: { listId: myList._id } }}>
Thank you for the input. I made the change and the first time it loaded, I clicked the link and received the same error (Warning: Location "listpages" did not match any routes). When I refreshed to try it again, now the application crashes on startup with an unexpected token error on the line that you suggested.
I am using ng-include directive to include partial views in IBM websphere Portlet.The code snippet is below
1.Defining render URL
<portlet:defineObjects />
<portlet:renderURL var="resourceURL" windowState="MINIMIZED" portletMode="view">
<portlet:param name="jspPage" value="/partials/list.html" />
</portlet:renderURL>
2.Main.js
<script>
var myApp = angular.module("App", []);
myApp.controller("myCtrl", function ($scope )
{
$scope.page='<%=resourceURL%>';
});
</script>
3.Home.jsp
<div id="<portlet:namespace />main" data-ng-app="App" data-ng-controller="myCtrl" >
<div ng-include src="'page'"></div>
<div>
But the partials are not included. Can anyone suggest me how to fix this?Am i missing anything?
You would need to change your code to go to the portlet context path:
Replace:
<%=resourceURL%>
with
<%=renderResponse.encodeURL(renderRequest.getContextPath():%>
This will work:
<div ng-include="'<%= renderResponse.encodeURL(renderRequest.getContextPath() + "/scripts/mypage.tpl.html") %>'"></div>