I am very new to react world. I was gone through many examples of react, flux, webpack etc. I found that when I create a page as a react component it is bundled by webpack and loaded in the page.
How to load react components dynamically when I click each tab.
I have done this using reat-router, but the problem is in the index.js I have to include all the tab components.
var Tab1 = require('./components/Tab1');
var Tab2 = require('./components/Tab2');
var Tab3 = require('./components/Tab3');
render((
<Router>
<Route path="/" component={Tab1}>
<Route path="about" component={Tab2} />
<Route path="users" component={Tab3} />
</Route>
</Router>
), document.body)
is there any way to load these components dynamically without including the components early in the page?
or webpack will handle this?
When i search the bundle.js I found all the components there. In my case each components will be a heavy scripts, so it is not good to load all the components in the first loading itself.
I have achieved this using code you can find out the code form here
Dynamic React-Router
At last I found a solution from here
https://github.com/rackt/react-router/blob/master/docs/guides/advanced/DynamicRouting.md
https://webpack.github.io/docs/code-splitting.html
require.ensure(["module-a", "module-b"], function(require) {
var a = require("module-a");
// ...
});
Related
I was trying different ways of declaring routes in a modular way. I came across to a strange behaviour:
<Switch>
<Route path='/1' component={Route1} />
<ModuleLikeRoutes />
<Route path='/2' component={Route2} />
</Switch>
React router completely ignores /2 and doesn't render Route2. I couldn't find any reason why.
I know I can import a 'module' component like
<Route path='/module' component={ModuleComponent} />
and probably it's the better way to do it. But I'm just curios how/why it ignores the routes after a custom component. Why I cant render Route2 in the example?
Here is a working fiddle https://jsfiddle.net/o4dtrpag/
A Switch will render only one of its children. If the path doesn't match /1 it will check the second one which is ModuleLikeRoutes, and that will be rendered every time, effectively making all components after it meaningless.
I am not sure if it is a bug or a not-supported feature by the library. However, the below code works by order the ModuleLikeRoutes to the last position.
<Switch>
<Route path='/1' component={Route1} />
<Route path='/2' component={Route2} />
<ModuleLikeRoutes />
</Switch>
I'm building a single page web application using React. For this application, I'd like to prevent the URL from changing and also avoid using href links to prevent the "link preview" from showing up in the bottom left hand corner of browsers.
To address the first half of my problem I found that using MemoryRouter from react-router prevented URLs from changing when navigating within the application.
Here's a PoC for the router:
import App from './stuff/main/App';
import {Route, MemoryRouter} from "react-router";
import default_page from "./stuff/pages/default_page"
import another_page from "./stuff/pages/another_page"
const app = document.getElementById('root');
ReactDOM.render(
<MemoryRouter>
<App>
<Route exact path="/" component={default_page} />
<Route path="/anotherpage" component={another_page} />
</App>
</MemoryRouter>,
app
);
Then in App I have code like this (which works):
...
<Link to="/">default_page</Link>
<Link to="/anotherpage">another_page</Link>
{this.props.children}
...
I cannot figure out how to change pages in javascript using the MemoryRouter. The only method I've been able to find that works is using the Link tag, which causes the url to show up on the bottom left hand of the screen. If I could use another element and onclick, I'd be golden.
If you are in child Component of <Route>, you should have history prop available:
<button onClick={()=>this.props.history.push('/anotherpage')} >another_page</button>
If you are not, you can pass props.history from parent element.
Or if you are deep in structure you should use withRouter HOC
Or you can create a new without path prop, so it will match always and it provide you the right history object.
<Route render={({history})=>(
<button onClick={()=>history.push('/anotherpage')} >another_page</button>
// more buttons
)} />
I got two React components rendered like this.
ReactDOM.render(
<Router history={ browserHistory }>
<Route path='/items' component={ App }>
<IndexRoute component={ Home } />
<Route path='/items/:id' component={ Details } />
</Route>
</Router>,
document.getElementById('app')
);
And the second one, which is a sidebar.
ReactDOM.render(
<Sidebar />,
document.getElementById('sidebar')
);
I'd like to use the Link helper from react-router in the Sidebar component. However, I get the following error: "Uncaught Invariant Violation: Links rendered outside of a router context cannot navigate.". Which makes sense, because the sidebar is not within the router context like the first seen above.
Is there a way to share the router context with the sidebar?
I'd like to change the sidebar layout based on the route (and access the router object in this.props properly) and use Link as it should be.
I don't want to work my way around hacky approaches like history.pushState, or parsing location.path to change the sidebar's layout according to the corresponding route of items.
You should be able to just render your sidebar in its own <Router>. The important thing is that they share the same history instance (in this case, browserHistory).
When a <Router> mounts, it adds a listener to its history instance. When a history instance receives a new location, it notifies all of its listeners.
ReactDOM.render((
<Router history={browserHistory}>
<Route component={Sidebar} />
</Router>
) document.getElementById('sidebar')
I am designing a multi-tabbed or multi-paged javascript web application that allows the URL to change depending on which tab you selected.
The best example I have seen is done by Zendesk
By calling it multi-tabbed, am I describing it correctly?
The tabs can be closed or opened depending on what is clicked.
How to create something like this using ReactJS? If there is a good tutorial, I am also happy to read through it.
This can easily be done with react router. If you are not familiar with react router go to the react router github page and check out the tutorials and docs. Here's an example of what it may look like to get you going.
Routes
<Route path="/" component={Application}>
<IndexRoute component={Home}/>
<Route path="tabs" component={TabLayout}>
<Route path="1" component={Tab1} />
<Route path="2" component={Tab2} />
</Route>
<Route path="about" component={About}/>
<Route path="*" component={NotFound} isNotFound/>
</Route>
Tab Layout
/* This is the layout for your tabs. Using react router to link to different tabs.
When the route changes props.children will be updated to reflect the current
route. You can add active classes to your tabs. Reference the react-router docs to
see how to do that
*/
import {Link} from 'react-router';
const TabLayout = props => {
return (
<section className="tab-container">
<div className="tabs">
<Link to="/tabs/1">Tab 1</Link>
<Link to="/tabs/2">Tab 2</Link>
</div>
<div className="content">
{props.children}
</div>
</section>
);
};
Tab 1 and tab 2 look like this
// Tab1 and Tab2 are just react components. For simplicity I am just using
// a stateless component.
const Tab1 = props => {
return (
<h1>Tab 1</h1>
);
};
I want to link to a specific section section of a page with react router a lot like how anchor tags would work in html. However, I couldn't find solutions with React Router version 1.0.0.
Currently, i have my router like this:
let history = createHashHistory({
queryKey: false
});
<Router history={history}>
<Route path="/" component={a}/>
<Route path="/b" component={b}/>
<Route path="/c" component={c}/>
<Route path="/d" component={d}/>
<Route path="/e" component={e}/>
<Route path="/f" component={f}/>
<Route path="/g" component={g}/>
</Router>
and I am trying to link to a specific section in the components like
<Link to="/b#{div_id}"> Go to section with div_id is component {b} </Link>
There is currently an open issue on GitHub for this. It doesn't appear to be supported, but it should be supported when using HistoryLocation when this issue is fixed.
EDIT
This is no longer supported.