As im new to Reactjs it is hard for me to explain this, but I am trying to define all pages(components, routes and more) on a different page (routes.js) and looping this on the app.js page in order to build all pages/routes. But the imports of the pages are not working because I didn't defined them on the same page.
When I 'am not using the foreach the pages will load.
//app.js
import RC from './constants/Routes';
import {Page1,Page2,Page3} from "./components/pages";// not used here but set in route.js
<Switch>
{Object.keys(RC).forEach(key=>{
<Route path={RC[key].route} component={RC[key].component}/>
})}
</Switch>
//routes.js
export default Object.freeze({
PAGE1: {
route: '/page1',
component: 'Page1'
},
PAGE2: {
route: '/page2',
component: 'Page2'
},
PAGE3: {
route: '/page3',
component: 'Page3'
},
});
Related
Is it not possible to route to the same component with a wildcard path?
If in React I have something like:
<Router>
<Switch>
<Route path="/path/:id" children={<Component />} />
</Switch>
</Router>
all the requests:
/path/123
/path/123/p
/path/123/p/1
will route to the same /path/123
How can I tell Gatsby to do the same?
createPage({
path: `/path/123/*`,
component,
context
})
Or what is the solution to this problem, a redirect engine of some sorts?
I think you are looking for client-only routes. Given a page (or template if it's created from gatsby-node.js) you can:
import React from "react"
import { Router } from "#reach/router"
import Layout from "../components/Layout"
import SomeComponent from "../components/SomeComponent"
const App = () => {
return (
<Layout>
<Router basepath="/app">
<SomeComponent path="/path" />
</Router>
</Layout>
)
}
export default App
Note: assuming a src/pages/app/[...].js page (File System Route API structure).
When a page loads, Reach Router looks at the path prop of each component nested under <Router />, and chooses one to render that best matches window.location (you can learn more about how routing works from the #reach/router documentation).
Alternatively, you can use an automated approach (plugin: gatsby-plugin-create-client-paths) by:
{
resolve: `gatsby-plugin-create-client-paths`,
options: { prefixes: [`/path/*`] },
},
Which will validate all routes under /path.
Or for a more customizable approach, in your gatsby-node.js:
exports.onCreatePage = async ({ page, actions }) => {
const { createPage } = actions
// page.matchPath is a special key that's used for matching pages
// only on the client.
if (page.path.match(/^\/path/)) {
page.matchPath = "/path/*"
// Update the page.
createPage(page)
}
}
Disclaimer: These routes will exist on the client only and will not correspond to index.html files in an app’s built assets. If you’d like site users to be able to visit client routes directly, you’ll need to set up your server to handle those routes appropriately.
I use react router for routing in my create-react-app. All routes work as expected using "npm start" ("react-scripts start").
However, now I would like to deploy my application and therefore ran "npm run-scripts build" ("react-scripts build"). Afterwards I ran "serve -s build" in order to start the webserver. In this version of my web application the static routes are working but the dynamic ones don't.
An example of a static route configuration looks like this. This route works in both, the dev mode and the build mode of the react application. Example URL: "http://localhost:5000/dashboard/viewData".
{
path: "/dashboard/viewData/",
component: withAuth(CrosstabTest),
exact: false
}
The following route is dynamic and doesn't work. However, my guess is that it is not due to ":processFlowItemId" but instead due to additional URL parameters. Example URL: "http://localhost:5000/dashboard/definition/1?id=0744a761-111c-446c-9bb5-2763c5c8bb04".
{
path: "/dashboard/definition/:processFlowItemId",
component: withAuth(DefinitionContainer),
exact: false
}
When I run the example URL without "?id=0744a761-111c-446c-9bb5-2763c5c8bb04" the application loads the component but as the id parameter is missing, I get an error. But at least it's an indication for the fact that the route is working in general but has issues with the parameter. When opening the complete example URL including the id field, the component seems not to be loaded at all (meaning react-router doesn't recognize the URL as an instance of the pattern defined in the route.
As mentioned, the issue only occurs when using the build version of the app.
Edit:
Below I describe the code in more details:
I have a config with my routes:
export const mainRoutes: any = [
{
path: "/dashboard/",
component: Dashboard,
exact: false
},
]
export const dashboardRoutes: any = [
{
path: "/dashboard/viewData/",
component: withAuth(CrosstabTest),
exact: false
},
{
path: "/dashboard/definition/:processFlowItemId",
component: withAuth(DefinitionContainer),
exact: false
},
]
The main route ("mainRoute") is rendered here:
import { mainRoutes } from './routes/routes'
import { Switch, BrowserRouter, Route } from 'react-router-dom'
class App extends React.Component<any> {
public render() {
return (
<BrowserRouter>
{mainRoutes.map((route: any, i: number) => (
<Switch key={i}>
<Route key={i} path={route.path} component={route.component} exact={route.exact} />
</Switch>
))
}
</BrowserRouter>
)
}
}
export default App
In the Dashboard component ("Dashboard") I render a subroute:
import { Switch, Route } from 'react-router-dom'
import { dashboardRoutes } from '../../routes/routes'
...
dashboardRoutes.map((route: any, i: number) => (
<Switch key={i}>
< Route exact={true} key={i} path={route.path} render={(props) => {
return <route.component key={i} {...props} />
}} />
</Switch>
))
...
I had the same problem and solved it by exchanging BrowserRouter for HashRouter
I have multiple apps as part of one React-redux-typescript project. All of these individual apps are part of a core-application. I want to dynamically set up routing.
My current routes look like this:
Routes.tsx
import HomePageApp from "../Components/Home/HomeApp";
import TestApp from "../Components/Test/TestApp";
export default function Routes() {
return (
<Switch>
<RedirectIfAuthenticated
exact={true}
isAuthenticated={true}
path={Path.homePath} --> "/"
component={HomePage} ---> AppName coming from import statement on top
redirectPath={Path.homePath} --> "/"
/>
<RedirectIfAuthenticated
isAuthenticated={true}
path={Path.apps.test} --> "/test"
component={TestApp} --> AppName from import on top
redirectPath={Path.homePath} --> "/"
/>
</Switch>
);
}
And RedirectIfAuthenticated simply redirects to correct applications' landing pages.
RedirectIfAuthenticated.tsx
export default function RedirectIfAuthenticated({
component,
redirectPath,
isAuthenticated,
...rest
}: IRedirectIfAuthenticatedProps) {
const Component = component;
const render = (renderProps: RouteComponentProps<any>) => {
let element = <Component {...renderProps} />;
return element;
};
return <Route {...rest} render={render}/>;
}
I've a config file like this:
Manifest.ts
export let manifest = {
apps: [
{
componentPath: "/Test/App",
path: "/test",
name: "Test"
},
...more objects for other apps
]
};
In my Routes.tsx, I want to make use of my manifest to render the RedirectIfAuthenticated component.
so I can figure out this change:
for brevity showing the dirty approach but the actual code iterates over the manifest using .map and renders RedirectIfAutenticated.
const app = manifest.apps.find(app => app.name === "Test");
<Switch>
<RedirectIfAuthenticated
isAuthenticated={true}
path={app.path} --> "/test"
component={What should I do here? How to pass component reference by path??}
redirectPath={"/"} ==> I typically get this from my manifest..
/>
</Switch>
One option is to do this:
component={require("path from manifest").default}
but our tslint throws a bunch of errors at this. Other than this I can't figure out how to pass the component reference here dynamically. Looking for a better approach.
The Routes.tsx needs to be dynamic so that adding new apps is a matter of configuration so I can't do imports on top because I dont know what's gonna be added in config. Thanks.
I was able to use dynamic imports to achieve this. I used this article to understand a few concepts.
private loadComponentFromPath(path: string) {
import(`../../ScriptsApp/${path}`).then(component =>
this.setState({
component: component.default
})
);
}
One important distinction here is if I don't give the path from the root of the app, I get an error saying "Unable to find the module". This is why I've given the full path from the root.
const routes = [
{ component: Root,
routes: [
{ path: '/',
exact: true,
component: Home
},
{ path: '/child/:id',
component: Child,
routes: [
{ path: '/child/:id/grand-child',
component: GrandChild
}
]
}
]
}
]
routes.config.js export routes object using in renderRoutes method which is exported by react-router-config
when I start the app and access the url localhost:3000 the Home component will be rendered .
If access localhost:3000/child the request is 404.
If access localhost:3000/#/child but it render Home component instead of Child component
In the development mode I know can add devServer:{historyApiFallback:true}, but should I do in the production mode ?
If using HashRouter it works well.
So how can I using the BrowserRouter?
Try this:
Step 1: Wrap your <App /> inside <BrowserRouter />
Step 2: <Router path="/child" component={Child} />
Step 3: Point this router using <Link to="/CHILD>Child</Link>"
I've 3 components
App Component
Login Component
Dashboard Component
App Component
The app component is the main component for the component tree. This component also holds the basic layout which consists of a header and a wrapper for the content.
<div class="container-fluid">
<navigation routes="$ctrl.routes"></navigation>
</div>
<ui-view></ui-view>
Login Component
The login component is a component which renders the login form and does it magic.
Dashboard Component
The dashboard component renders user data.
States
{
name: 'app',
url: '',
abstract: true,
component: 'appComponent',
resolve: {
routes: () => Routes
}
},
{
name: 'app.login',
url: '/',
label: 'Login',
data: {
navigations: ['navbar-no-user']
},
component: 'loginComponent',
resolve: {
redirectUrl: () => 'app.dashboard'
}
},
{
name: 'app.dashboard',
url: '/',
label: 'Dashboard',
data: {
navigations: ['navbar']
},
component: 'dashboardComponent'
}
Scenario
Visitor is loading the app, a navbar should be visible with only navbar-no-user items like login. Visitor logs in and becomes a user, now should see a navbar with only navbar items like dashboard.
Question
I am looking for a solution for this scenario, usually there was a onStateChange event and i could use this inside a controller. The only option i see now available is to render the navigation in each component specific.
I usually introduce an intermediate/parent state to do this.
For example, I would define the following states:
app (abstract)
app.login
app.main (abstract)
app.main.dashboard
app.main.home
and so on
If I wanted to only display a navigation for logged in users for example, my route templates would look like this:
app route template
<ui-view></ui-view>
app.main route template
<div class="container-fluid">
<navigation routes="$ctrl.routes"></navigation>
</div>
<ui-view></ui-view>