My application has nested switches and I am trying to work out how to create a link that will navigate from one to the other. The app is structured like this:
App
Main switch (/)
Assets switch (/assets/)
Table component with Link
Templates switch (/templates/)
Object viewer component to be linked too
The link component looks like this, with id being the templates UUID:
<Link to={`/templates/${id}`} {...itemProps} />
But when you click the link you go to /assets/correct-UUID.
I can't find any information on this so I'm not sure if this is the classic intermediate problem not covered by tutorials, something that isn't possible or I'm just doing something wrong. Does anyone know which one it is?
That defeats the purpose of the Switch and the router at the same time. From the docs:
Renders the first child <Route> or <Redirect> that matches the location.
Switch basically ensures there's only ever one component rendered in the router. For optimal results, keep your routes in one component, as there is rarely any need to nest them like you do. For example:
import { Switch, Route } from 'react-router'
<Switch>
<Route exact path="/" component={Main}/>
<Route path="/assets" component={Assets}/>
<Route path="/templates" component={Templates}/>
</Switch>
So you define your routes in your app entry point let's say App.js. And that's it, if you want more routes, add them there. If you want nested routes, you nest by literally nesting it: <Route path="/assets/:id/update" component={AssetUpdate} />. That's all there is to it.
Related
Ive made a homepage/ template for a website. However, to add more pages i would have to copy this template with the added content of each page. Obviously, this would mean changing every single page if i make a small change to the template.
How do i have a main index page and then for every other page just change the content?
You do not mention a library of any kind in your question, so I will recommend a JavaScript library to you: React.JS.
With React.JS, you could utilize the routing system and make your template be returned for every route. However, you could change the props on each route in order to change the content that you want to be changed. Here's an example, in unfunctional code, of what you can do in React.JS:
<Route path='/hi'>
<Template content={'Hello!'} />
</Route>
<Route path='/bye'>
<Template content={'Goodbye!'} />
</Route>
<Route path='/'>
<Template />
</Route>
To learn more about React, here's the official documentation: https://reactjs.org/docs/getting-started.html.
I really recommend that you use React for this situation, I think it would make the development a lot easier. If you are already using a library, give me a comment and I will try to help you out for that specific library.
You can do this by using JavaScript. Just select the tags that needs to be improved and change their content by doing something like this
document.queryselector('.classname' or '#idname').innerHTML="your new content";
If you want to change an image, then try doing
document.queryselector('.classname' or '#idname').src="url of your image";
I'm currently making a react application with create-react-app
It's a single page with several sections (Home / About / Contact ...)
Each section is a component that I export, of course.
Currently my App.js is like this :
App.jsx
import Menu from './components/menu/Menu';
import Header from './components/header/Header';
import Home from './components/sections/00_home/Home';
import About from './components/sections/01_about/About';
import Works from './components/sections/02_works/Works';
import Contact from './components/sections/03_contact/Contact';
const App = () => {
return (
<div className={styles.Container}>
<Menu />
<Header />
<Home />
<About />
<Works />
<Contact />
</div>
);
};
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
/* CSS */
import './index.css';
/* JSX */
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
To go from one section to another I use the anchor tag href's
For example in the home section, I have links to the other sections, same for the menu.
So far so good for me, but I'm wondering a question.
Should I use react-router? If so, why?
In which situation should I use it ?
If someone could enlighten me on that, that'd be great.
Is the way I currently code unconventional?
Ced.
From your question, perhaps you misunderstood the single-page application (SPA) theory which is the main reason for why we have to adopt React Router instead of html hrefs. A brief clear overview from quick gg is that "React Router, a dynamic, client-side routing, allows us to build a single-page web application with navigation without the page refreshing as the user navigates. React Router uses component structure to call components, which display the appropriate information."
So when you are having some shared components and you want to write less code and avoid reloads whenever user navigate around which is quite annoying then React router is a solution you need.
There are few differences in both which are quite important:
React-router: You can define the links you wanna go to and with the help of Link tag you define the URL in other components. In this situation, the Link tag will not refresh the page but instead would go onto the corresponding page but a href will refresh the page.
It might be difficult for you to pass information between components, as it is an important concept behind react.
Another would be an example, like if you are on /classes link and you go for a href tag, then it that case it will redirect you (i.e., you are using a relative path) to the /classes/teachers page, but you might want to go to /teachers URL. With the lp of Link and router, when you provide /teachers, it will redirect you to this URL
I have also started working on react and these are the points I came through.
In my react App, I have the functionality to create Folders and Files. A folder can have any number of folders inside it.
like so
Folder-1
|_Folder-1-1
|_Folder-1-2
|_Folder-1-2-1
|_Folder-1-2-2
|_Folder-1-2-2-1
.
.
.
and it can get deeper up to any level.
Currently, What I am doing is. There's a component that loads the root folder Folder-1, When you click on Folder-1. I change the route and load another component.
My route Looks like <Route exact path="/clients/:folder" component={ClientFolder} />
But the problem here is I don't know the number of parameters.
The way I envisioned it is
You click on Folder-1, URL changes to /clients/Folder-1,
Then, it loads all the Folders inside Folder-1, i.e Folder-1-1, and Folder1-2
You click on Folder-1-2, URL changes to /clients/Folder-1/Folder-1-2, Loads Files and folders inside Folder-1-2
and so on.
So my question is, How can I have Any number of nested routes using a single route and a single Component
I am using react-router 5
Remove the exact match it would work
You can refer to this sample https://codesandbox.io/s/great-tu-yr85t
This can be done by using the match all *. Something like:
<Route path="/clients/*">
Whatever path is passed after /clients will then be available in match.params["0"].
I'm trying to use react-router v4 and for some reason when I change the routes using normal links and the Link components, the route doesn't trigger, but if I access directly in the URL bar or just refresh the page, the component from that route renders the component. After inspect, I've saw that the context is updated but the props not. As you can see in the image below:
Started at the '/about' route, clicked the '/projects' Link (the AboutMe component stills inside the Switch, instead of change for the Projects component). The routes are defined like this:
<Switch>
<Route exact path='/' component={Home}/>
<Route path='/about' component={AboutMe}/>
<Route path='/projects' component={Projects}/>
<Route path='/contact' component={Contact}/>
<Route component={NotFound} />
</Switch>
I've already tried using the BrowserRouter, HashRouter and just the Router components and also with/without wrapping the routes in the Switch component (nothing seems to work).
I'm already after two days searching in tutorials, in the docs, other stackoverflow questions and in the repo issues, and found nothing so far, so here I'm! :)
I'm using these packages:
react v15.5.4
react-router-dom v4.1.1
Thanks in advance! \o
Situation: I have a several input components but depending on the route (react-router) different ones are shown.
Problem: I want the input values the user already entered to be preserved when switching back and forth between routes and dropping/re-adding input components.
I came up with two solutions so far: 1) Always render everything but hide via CSS if not to be shown (breaks the idea of React for me somehow)
2) Implement some kind of "input value store" in the flux architecture (pretty elabortate)
Any other ideas? Am I missing something more fundamental?
I would definitely go for the second approach, something Flux like. But if this is the only thing in your application that needs it, you can keep it very simple. Should be possible to implement in very few lines of code.
The benefit you get is that the Flux approach scales very well, so you won't have to rewrite it if the application grows.
Look at Dynamic Segments
If you have dynamic segments in your URL, a transition from /users/123 to /users/456 does not call getInitialState, componentWillMount, componentWillUnmount or componentDidMount. React-Router-Guide
You should use dynamic routes like this example:
<Route name="inbox" handler={Inbox}>
<Route name="message" path=":messageId" handler={Message}/>
<DefaultRoute handler={InboxStats}/>
</Route>
If you change the messageId(child component) you will still have the same state in the Inbox(parent) Component.
It will look something like this:
<Route name="search" path="/search/:query?/:limit?/:offset?" handler={Search} />