Everything is about isomorphic application. I'm using React with react-router module on server side for routing purposes and have following warning in browser console.
Warning: render(...): Replacing React-rendered children with a new
root component. If you intended to update the children of this node,
you should instead have the existing children update their state and
render the new components instead of calling ReactDOM.render.
I have following routes schema defined on backend:
<Route path="/" component={App} >
<IndexRoute component={Home} />
</Route>
App component:
module.exports = React.createClass({
render : function() {
return <html>
<head></head>
<body>
<div id="container">
{ this.props.children }
</div>
<script src="/app/bundle.js"></script>
</body>
</html>
}
});
Home component:
module.exports = React.createClass({
render : function() {
return <div>Any content here</div>
}
});
After that I use on the frontend:
ReactDOM.render(<Home />, document.getElementById('container'));
Probable solution:
If I understood correctly if I could render App component as static markup(renderToStaticMarkup) and Home component as a string (renderToString), then it would be ok.
Is it possible to implement something like that with react-router?
Assuming RR 1.03, your routing configuration looks fine.
Your app component should be like this:
module.exports = React.createClass({
render : function() {
return <html>
<head></head>
<body>
<div id="container">
{React.cloneElement(this.props.children,
{
anyOtherPropsHere: 'blablah'
}
)}
</div>
<script src="/app/bundle.js"></script>
</body>
</html>
}
});
Your server response -> render should look something like this. (taken from the documentation)
import { renderToString } from 'react-dom/server'
import { match, RouterContext } from 'react-router'
import routes from './routes'
serve((req, res) => {
// Note that req.url here should be the full URL path from
// the original request, including the query string.
match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
if (error) {
res.status(500).send(error.message)
} else if (redirectLocation) {
res.redirect(302, redirectLocation.pathname + redirectLocation.search)
} else if (renderProps) {
// You can also check renderProps.components or renderProps.routes for
// your "not found" component or route respectively, and send a 404 as
// below, if you're using a catch-all route.
res.status(200).send(renderToString(<RouterContext {...renderProps} />))
} else {
res.status(404).send('Not found')
}
})
})
And finally, somewhere on clientside load, do something like this. I've added the history library in this example to help.
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, match, RoutingContext } from 'react-router';
import history from 'utils/history';
import AppRoutes from '/app/AppRoutes';
// use this function to return a Route component with the right props
function createFluxComponent(Component, props) {
props = Object.assign(props, {
flux: window.flux.or.whatevs
});
return <Component {...props} />;
}
// add a global history listener perhaps?
history.listen(function(location) {
console.log('Transition to--------------', location.pathname);
});
// add window.router polyfill for transitionTo
window.router = {
transitionTo: function(t) {
return history.pushState(null, t);
}
};
// render your routing configuration, history and flux as props
ReactDOM.render(<Router createElement={createFluxComponent} history={history} routes={AppRoutes}/>, document);
What is most important is that you render to string using the RouterContext and render props on the server side. You get the renderProps from the RR match function, which will run your routes against the config and produce the right component in renderProps. Then you'll simply render the client side with Router element and the router config to the document. Does this make sense? It should work without any invariants.
Related
I'm trying to create a multiple page web application using react-router-dom, but when I try to create the user list page (userlist.js), the .map() function is not returning anything that is inside the .map() function, but the last line before the .map() line is working fine, displaying <h1> with no problems.
Here's my App.js:
import './App.css';
import { useEffect, useState } from "react"
import axios from 'axios';
import React from "react"
import {
BrowserRouter as Router,
Routes,
Route,
Link
} from "react-router-dom"
import Home from './home'
import Userlist from './userlist'
function App() {
return (
<body>
<header>
<div className="divheadertitle">
<h1 className="headertitle">Tree.io</h1>
</div>
<Router>
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/userlist">User list</Link></li>
</ul>
</nav>
<Routes>
<Route path='/userlist' element={<Userlist />/>
<Route path='/' element={<Home />/>
</Routes>
</Router>
</header>
</body>
)
}
export default App;
Here's my userlist.js:
import React from "react"
import axios from 'axios'
import { useState, useEffect } from "react"
function userlist() {
const [listOfUsers, setListOfUsers] = useState([])
useEffect(() => {
axios.get('https://localhost:3001/userlist')
.then((response) => {
setListOfUsers(response.data)
})
}, [])
return (
<div className="userlistdiv">
<h1>Lista de usuários:</h1>
{listOfUsers.map((user) => {
return (
<div>
<h1>Name: {user.name}</h1>
<h1>Age: {user.age}</h1>
<h1>E-mail: {user.email}</h1>
</div>
)
})}
</div>
);
}
export default userlist;
And finally, my back-end file, index.js:
const express = require('express');
const app = express();
const PORT = 3001;
const mongo = require('./mongo')
const usersModel = require('./models/userschema')
const cors = require('cors')
app.use(express.json())
app.use(cors())
app.get('/userlist', (req, res) => {
usersModel.users.find({}).then((result, err) => {
if (err) {
res.json(err)
} else {
res.json(result)
}
})
})
app.get('/createUser', (req, res) => {
const create = new usersModel.users({
name: req.params.name,
age: req.params.age,
email: req.params.email
})
create.save()
res.send('x')
})
app.listen(PORT, () => {
console.log('Servidor rodando na porta ' + PORT);
})
Your routes need to be modified slightly. As the project's root folder is part of the path for each of the Route components, I'd also suggest using the exact attribute for the Home component, to ensure you won't run into any issues.
<Route exact path='/' element={<Home />} />
<Route path='/userlist' element={<Userlist />} />
I'm seeing both userlist and Userlist being used. This will create issues in JavaScript. Common convention in React is to use PascalCase for components throughout. You can keep the to attribute in Link and the path attribute in Route as lowercase, though. Some examples are included.
UserList.js
export UserList;
import UserList from './UserList';
function UserList { ... }
<div className='UserList'>...</div>
You might verify if you are calling with the right protocol.
axios.get('https://localhost:3001/userlist');
To avoid compilation warnings, set a key for the outer div within the map. You can use an id property from the data, or any other property that contains unique values in each entry.
<div key={user.id}>...</div>
Have you tried to debug the content of listOfUsers using console.log for instance ? Try to put it one in the axios response, just before calling setListOfUsers(response.data). It looks like your array is empty, because your userlist server response can't find any user. What does your usermodel look like ?
Or maybe just try to rename your component in PascalCase :
function UserList() {
...
}
instead of
function userlist() {
...
}
Because your useEffect hook is maybe juste not called at all, since hooks can only been called from components or from hooks (i.e. function with PascalCase name returning an element, or functions starting with use)
I have a website made with Docusaurus v2 that currently contains documentation. However, I would like to add a page of a list of workflows where if a workflow in the list is clicked, the user would be shown a page of additional details of that workflow. For now it seems docusaurus.config seems to be handling most of the routing, but is there a way I can add a dynamic route like /workflows/:id? I made a separate standalone app which had a Router object and it worked if my App.js looks like this:
// App.js
import Navigation from './Navigation'
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
function App() {
return (
<Router>
<Navigation />
<Switch>
<Route path="/" exact component={Home}></Route>
<Route path="/workflows" exact component={Workflows}></Route>
<Route path="/workflows/:id" component={WorkflowItem}></Route>
</Switch>
</Router>
)
}
Is it possible to add the Router somewhere in Docusaurus?
Thanks!
I solved this by creating a simple plugin to add my own custom routes. Documentation here.
Let's call the plugin plugin-dynamic-routes.
// {SITE_ROOT_DIR}/plugin-dynamic-routes/index.js
module.exports = function (context, options) {
return {
name: 'plugin-dynamic-routes',
async contentLoaded({ content, actions }) {
const { routes } = options
const { addRoute } = actions
routes.map(route => addRoute(route))
}
}
}
// docusaurus.config.js
const path = require('path')
module.exports = {
// ...
plugins: [
[
path.resolve(__dirname, 'plugin-dynamic-routes'),
{ // this is the options object passed to the plugin
routes: [
{ // using Route schema from react-router
path: '/workflows',
exact: false, // this is needed for sub-routes to match!
component: '#site/path/to/component/App'
}
]
}
],
],
}
You may be able to use the above method to configure sub-routes as well but I haven't tried it. For the custom page, all you need is the Switch component (you are technically using nested routes at this point). The Layout component is there to integrate the page into the rest of the Docusaurus site.
// App.js
import React from 'react'
import Layout from '#theme/Layout'
import { Switch, Route, useRouteMatch } from '#docusaurus/router'
function App() {
let match = useRouteMatch()
return (
<Layout title="Page Title">
<Switch>
<Route path={`${match.path}/:id`} component={WorkflowItem} />
<Route path={match.path} component={Workflows} />
</Switch>
</Layout>
)
}
I have followed this tutorial to implement authentication in my gatsby project. The problem is I have first setup the project and the routing is made from the pages folder and then I have implemented the above auth code but it still taking the routes from the pages folder and not from the app.js file. Could someone please help how can I route my components from the app.js instead of using from pages folder.
This is my gatsby-nodejs file
// Implement the Gatsby API “onCreatePage”. This is
// called after every page is created.
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(/^\/app/)) {
page.matchPath = "/app/*"
// Update the page.
createPage(page)
}
}
here is src/pages.app.js
import React from "react"
import { Router } from "#reach/router"
import Layout from "../components/layout"
import Home from '../components/dashboard/home/container'
import Login from '../components/marketing/home/pulsemetrics'
import { isLoggedIn } from "../services/auth"
console.log('vvvvvvvvvvvvvvvvvvvvv')
const PrivateRoute = ({ component: Component, location, ...rest }) => {
console.log('hjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjiiiiiiiiiiiiiiiiiii')
if (!isLoggedIn() && location.pathname !== `/app/login`) {
// If the user is not logged in, redirect to the login page.
navigate(`/app/login`)
return null
}
return <Component {...rest} />
}
const App = () => (
<Layout>
<Router>
<PrivateRoute path="/ddddddddddddddddddd" component={Home} />
<Login path="/" />
</Router>
</Layout>
)
export default App
The paths that you have in your App.js should have /app/ prepended in front of them since your PrivateRoute logic uses that to check for a login. Furthermore what your gatsby-node.js file is really saying is that for routes starting with app it should create a new page. Your src/pages/app.js has the task to define how these pages should be created (since they won't be the usual generated static pages by gatsby)
import React from "react"
import { Router } from "#reach/router"
import Layout from "../components/layout"
import Home from '../components/dashboard/home/container'
import Login from '../components/marketing/home/pulsemetrics'
import { isLoggedIn } from "../services/auth"
console.log('vvvvvvvvvvvvvvvvvvvvv')
const PrivateRoute = ({ component: Component, location, ...rest }) => {
console.log('hjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjiiiiiiiiiiiiiiiiiii')
if (!isLoggedIn() && location.pathname !== `/app/login`) {
// If the user is not logged in, redirect to the login page.
navigate(`/app/login`)
return null
}
return <Component {...rest} />
}
const App = () => (
<Layout>
<Router>
<PrivateRoute path="/app/home" component={Home} />
<Login path="/app/login" />
</Router>
</Layout>
)
export default App
Read the gatsby client-only routes documentation for reference or have a look at this github issue
I'm new to react.
I want to add some security to my Async-Routes which I implemented in my routes.js:
import React from 'react';
import App from './app.jsx';
import Home from './components/home.jsx';
import {Router, Route, IndexRoute, hashHistory} from 'react-router';
function loadRoute(cb) {
return (module) => cb(null, module.default);
}
const routes = {
component: App,
childRoutes: [
{
path: "/",
component: Home
},
{
path: "/hello/:foo",
getComponent(location, cb) {
System.import('./components/hello.jsx')
.then(loadRoute(cb))
.catch(errorLoading);
}
},
]
};
export default () => <Router history={hashHistory} routes={routes} />
As you can see the "/hello/:foo" route is async.
How can I restrict the access to this route (role-based) and redirect to somewhere else (e.g. login)?
I want to load the chunk only when it's needed.
Should I place the checking code into "getComponent()"?
Can it be done with "willTransitionTo()", will this function be executed before "getComponent()" and how should I implement it?
I would place the checking code into componentWillMount(), and in render() return the page component, or display/redirect to login.
If you have multiple page that need access restricted, I'd create a high level component order for each page component to check access before rendering.
I have a React app that also uses Redux and ReactRouter.
My problem is the following:
When I launch the app and go to the root url, I can normally navigate inside the app, and the routes in the navigation bar will be changing as I navigate.
However, if I type in the navigation bar any url other than the root, I get a weird error:
I don't really get how one can get such an error.
If I go to localhost:1337/ and then click on the item with the link /cars/1, everything will be fine and the component will successfully get rendered. If I type localhost:1337/cars/1 right away (or any other existing route) I get this error.
Here's how I initialize the react-router and define my routes:
index.js:
require('./style/style.css');
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { Router, browserHistory } from 'react-router';
import reduxPromise from 'redux-promise';
import routes from './routes';
import reducers from './reducers';
const createStoreWithMiddleware = applyMiddleware(
reduxPromise
)(createStore);
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<Router history={browserHistory} routes={routes} />
</Provider>
, document.querySelector('.container.app')
);
routes.js:
import React from 'react';
import { Route, IndexRoute, Redirect } from 'react-router';
import App from './components/app';
import CarsIndex from './containers/cars-index';
import CarNew from './containers/car-new';
import CarShow from './containers/car-show';
import CarEdit from './containers/car-edit';
import SignIn from './containers/signin';
import auth from './auth/auth';
function requireAuth(nextState, replace) {
if (!auth.loggedIn()) {
replace({
pathname: '/authenticate',
state: { nextPathname: nextState.location.pathname }
});
}
}
function filterLoggedIn(nextState, replace) {
if (auth.loggedIn()) {
replace({
pathname: '/',
state: { nextPathname: nextState.location.pathname }
});
}
}
export default (
<Route path='/' component={App}>
<IndexRoute component={CarsIndex} onEnter={requireAuth} />
<Route path='cars/new' component={CarNew} onEnter={requireAuth} />
<Route path='cars/:id' component={CarShow} onEnter={requireAuth} />
<Route path='cars/edit/:id' component={CarEdit} onEnter={requireAuth} />
<Route path='authenticate' component={SignIn} onEnter={filterLoggedIn} />
<Redirect from='*' to='/' />
</Route>
);
My server is a small express.js app and it redirects any requests other than /api/* to the index.html page.
Here's a part from my server.js:
const path = require('path');
const port = process.env.PORT || 1337;
const app = express();
const pathToStatic = path.join(__dirname, 'static');
express.static(path.join(__dirname, 'static'));
app.use(express.static(pathToStatic));
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(bodyParser.json());
app.get('/api/cars', (req, res) => {
return Car.find((err, cars) => {
if (!err) {
return res.send(cars);
} else {
console.log(err);
res.statusCode = 500;
return res.send({ error: 'Server error' });
}
});
});
app.get('*', (req, res) => {
res.sendFile(path.resolve(pathToStatic, 'index.html'));
});
app.listen(port, () => {
console.log(`Express server is listening on port ${port}`);
});
Have you encountered such an issue? Could you help me to find out the soultion to this problem?
The screenshot shows that bundle.js (when requested) is returning index.html.
This is because your express routes handle route api/cars and then default everything else to index.html.
Of course all your resources that appear on index.html must also be sent the browser. This includes <script src="bundle.js"></script> which the browser will request once it gets index.html the first time.
So, you must have some way to allow express to handle requests for the resources that index.html needs.
A popular solution to this is to mount an assets directory and place that above the default route. Something like:
// api routes
app.use(express.static('assets'));
// default route
Then make sure your bundle.js is inside the assets directory. And then that the script tag looks like <script src="/assets/bundle.js"></script>.