I have this Router, any page that should has the Layout is wrapped with the withLayout HOC.
I need to pass to some of the pages the user context, how can I add a user prop?
const withLayout = () => Component => props => (
<div css={pageWrap}>
<Header user={props.user} />
<Component {...props} />
</div>
);
export default function Router() {
return (
<AuthConsumer>
{({ user }) => (
<Switch>
<Route exact path="/" component={withLayout()(Home, { user })} />
<Route exact path="/page1" component={withLayout()(Page1)} />
<Route exact path="/page2" component={withLayout()(Page2)} />
</Switch>
)}
</AuthConsumer>
);
}
I think you have problem with your withLayout. It should be:
const withLayout = () => (Component, props = {}) => (
<div css={pageWrap}>
<Header user={props.user} />
<Component {...props} />
</div>
);
What's AuthConsumer?
You could use contextType = AuthContext inside your page components. [from]
class MyClass extends React.Component {
static contextType = MyContext;
render() {
let value = this.context;
/* render something based on the value */
}
}
I was able to get this to work like this:
<Route exact path="/" render={props => withLayout()(Home)({ ...props, user })} />
Related
I am using React Router v6 in an application. I have a layout page, which uses an outlet to then show the main content. I would also like to include a title section that changes based on which path has been matched, but I am unsure how to do this.
function MainContent() {
return (
<div>
<div>{TITLE SHOULD GO HERE}</div>
<div><Outlet /></div>
</div>
);
}
function MainApp() {
return (
<Router>
<Routes>
<Route path="/projects" element={<MainContent />} >
<Route index element={<ProjectList />} title="Projects" />
<Route path="create" element={<CreateProject />} title="Create Project" />
</Route>
<Routes/>
</Router>
);
}
Is something like this possible? Ideally, I would like to have a few other props besides title that I can control in this way, so a good organization system for changes like this would be great.
The most straightforward way would be to move the title prop to the MainContent layout wrapper and wrap each route individually, but you'll lose the nested routing.
An alternative could be to create a React context to hold a title state and use a wrapper component to set the title.
const TitleContext = createContext({
title: "",
setTitle: () => {}
});
const useTitle = () => useContext(TitleContext);
const TitleProvider = ({ children }) => {
const [title, setTitle] = useState("");
return (
<TitleContext.Provider value={{ title, setTitle }}>
{children}
</TitleContext.Provider>
);
};
Wrap the app (or any ancestor component higher than the Routes component) with the provider.
<TitleProvider>
<App />
</TitleProvider>
Update MainContent to access the useTitle hook to get the current title value and render it.
function MainContent() {
const { title } = useTitle();
return (
<div>
<h1>{title}</h1>
<div>
<Outlet />
</div>
</div>
);
}
The TitleWrapper component.
const TitleWrapper = ({ children, title }) => {
const { setTitle } = useTitle();
useEffect(() => {
setTitle(title);
}, [setTitle, title]);
return children;
};
And update the routed components to be wrapped in a TitleWrapper component, passing the title prop here.
<Route path="/projects" element={<MainContent />}>
<Route
index
element={
<TitleWrapper title="Projects">
<ProjectList />
</TitleWrapper>
}
/>
<Route
path="create"
element={
<TitleWrapper title="Create Project">
<CreateProject />
</TitleWrapper>
}
/>
</Route>
In this way, MainContent can be thought of as UI common to a set of routes whereas TitleWrapper (you can choose a more fitting name) can be thought of as UI specific to a route.
Update
I had forgotten about the Outlet component providing its own React Context. This becomes a little more trivial. Thanks #LIIT.
Example:
import { useOutletContext } from 'react-router-dom';
const useTitle = (title) => {
const { setTitle } = useOutletContext();
useEffect(() => {
setTitle(title);
}, [setTitle, title]);
};
...
function MainContent() {
const [title, setTitle] = useState("");
return (
<div>
<h1>{title}</h1>
<div>
<Outlet context={{ title, setTitle }} />
</div>
</div>
);
}
...
const CreateProject = ({ title }) => {
useTitle(title);
return ...;
};
...
<Router>
<Routes>
<Route path="/projects" element={<MainContent />}>
<Route index element={<ProjectList title="Projects" />} />
<Route
path="create"
element={<CreateProject title="Create Project" />}
/>
</Route>
</Routes>
</Router>
I was facing the same issue for a left-right layout: changing sidebar content and main content, without repeating styling, banner, etc.
The simplest approach I found was to remove nested routing, and create a layout component in which I feed the changing content through properties.
Layout component (stripped for this post):
export function Layout(props) {
return (
<>
<div class="left-sidebar">
<img id="logo" src={Logo} alt="My logo" />
{props.left}
</div>
<div className='right'>
<header className="App-header">
<h1>This is big text!</h1>
</header>
<nav>
<NavLink to="/a">A</NavLink>
|
<NavLink to="/b">B</NavLink>
</nav>
<main>
{props.right}
</main>
</div>
</>
);
}
Usage in react router:
<Route path="myPath" element={
<Layout left={<p>I'm left</p>}
right={<p>I'm right</p>} />
} />
Another solution is to use the handle prop on the route as described in the useMatches documentation.
import { useMatches } from "react-router-dom";
function MainContent() {
const matches = useMatches()
const [title] = matches
.filter((match) => Boolean(match.handle?.title))
.map((match) => match.handle.title);
return (
<div>
<div>{title}</div>
<div><Outlet /></div>
</div>
);
}
function MainApp() {
return (
<Router>
<Routes>
<Route path="/projects" element={<MainContent />} >
<Route index element={<ProjectList />} handle={{ title: "Projects" }} />
<Route path="create" element={<CreateProject />} handle={{ title: "Create Project" }} />
</Route>
<Routes/>
</Router>
);
}
Im trying to figure out how to structure a Router to use different routes for admin, user and public.
I have seen this post and the answer describing a key cloak - but I haven't been able to make sense of it.
I've seen this code sandbox which looks logical to me, but I'm having trouble incorporating it.
I have a constants file where I and defining routes as:
export const NEWBLOG = '/admin/newblog';
export const VIEWBLOG = '/viewblog';
I'm importing that into my App.js and then wanting to define different consts for Admin, User and Public as follows:
import * as ROUTES from '../../util/constants/Routes';
import NewBlog from '../../components/blog/admin/New';
// admin routes
const Admin = ({ match }) => (
<React.Fragment>
<Route path={`${match.path}/${ROUTES.NEWBLOG}`} component={NewBlog} />
<Route path={`${match.path}/2`} render={() => <h2>test</h2>} />
</React.Fragment>
);
// authenticated user routes
const Other = ({ match }) => (
<React.Fragment>
<Switch>
<Route path={`${match.path}/2`} render={() => <h2>one</h2>} />
<Route path={`${match.path}/2`} render={() => <h2>two</h2>} />
</Switch>
</React.Fragment>
);
// public routes
const Public = ({ match }) => (
<React.Fragment>
<Switch>
<Route path={`${match.path}/2`} render={() => <h2>one</h2>} />
<Route path={`${match.path}/2`} render={() => <h2>two</h2>} />
</Switch>
</React.Fragment>
);
Then inside the router statement I have:
const App = () => (
<Router>
<Navigation />
<Switch>
<Route path="/a" component={Admin} />
<Route path="/u" component={Other} />
<Route path="/p" component={Public} />
<Route
component={({ location }) => {
return (
<div
style={{
padding: "50px",
width: "100%",
textAlign: "center"
}}
>
<ErrorMessage />
</div>
);
}}
/>
</Switch>
</Router>
);
export default App;
This all works until I try to use the routes constants inside the back ticks part of the Admin constant.
I can't seem to use that approach.
Can anyone help with a source of reference materials to find a way through this?
There are few things you need to know
Child Routes will render only when the Parent route path is matched
For the Child Route the path needs to be the path that matched the parent + the child route path
You can write wrappers over route which are responsible for deciding if the user is authenticated or an admin
In all such scenarios you need to store the user authentication state within state, context or redux store.
When you render the Route in Admin like
<Route path={`${match.path}/${ROUTES.NEWBLOG}`} component={NewBlog} />
The path to the component actually becomes /a/admin/newBlog which is actually incorrect
Overall you can change your code to something like this
App.js
const App = () => (
<Router>
<Navigation />
<Switch>
<Route path="/admin" component={Admin} />
<Route path="/user" component={Other} />
<Route path="/public" component={Public} />
</Switch>
</Router>
);
AuthRoute.js
const AuthRoute = (props) => {
const {path, match, component: Component, render, ...rest} = props;
const {user, isLoading} = useContext(AuthContext); // Assuming you use context to store route, you can actually get this values from redux store too.
return (
<Route
{...rest}
path={`${match.path}${path}`}
render={(routerProps) => {
if(isLoading) return <div>Loading...</div>
if(!user) return <div>Not Authenticated</div>
return Component? <Component {...rest} {...routerProps} /> : render(routerProps)
}}
/>
}
An adminRoute needs to both check whether the user is admin as well as check if he is authenticated or not so you component would look like
AdminRoute.js
const AdminRoute = (props) => {
const {path, match, ...rest} = props;
const {user, isLoading} = useContext(AuthContext); // Assuming you use context to store route, you can actually get this values from redux store too.
return (
<Route
{...rest}
path={`${match.path}${path}`}
render={(routerProps) => {
if(isLoading) return <div>Loading...</div>
if(!user) return <div>Not Authenticated</div>
if(user.role !== "admin") return <div>Need to be an admin to access this route</div>
return Component? <Component {...rest} {...routerProps} /> : render(routerProps)
}}
/>
}
Now you can use the above two components to separate out the Admin and Auth Routes
Also keep in mind that AuthRoutes and public routes paths cannot be the same
Route constants
export const NEWBLOG = '/newblog';
export const VIEWBLOG = '/viewblog';
Routes
import * as ROUTES from '../../util/constants/Routes';
import NewBlog from '../../components/blog/admin/New';
// admin routes
const Admin = (props) => (
<React.Fragment>
<AdminRoute {...props} path={ROUTES.NEWBLOG} component={NewBlog} />
<AdminRoute {...props} path='/2' render={() => <h2>test</h2>} />
</React.Fragment>
);
// authenticated user routes
const Other = (props) => (
<React.Fragment>
<Switch>
<AuthRoute {...props} path={'/3'} render={() => <h2>one</h2>} />
<AuthRoute {...props} path={'/4'} render={() => <h2>two</h2>} />
</Switch>
</React.Fragment>
);
// public routes
const Public = ({ match }) => (
<React.Fragment>
<Switch>
<Route path={`${match.path}/5`} render={() => <h2>one</h2>} />
<Route path={`${match.path}/6`} render={() => <h2>two</h2>} />
</Switch>
</React.Fragment>
);
I'm looking for a way to do some route protection with react-router-4. Looking at an example in the documentation, they create a Component which is rendered like this:
<PrivateRoute path="/protected" component={Protected} />
and the privateRoute component:
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={props => (
fakeAuth.isAuthenticated ? (
<Component {...props}/>
) : (
<Redirect to={{
pathname: '/login',
state: { from: props.location }
}}/>
)
)}/>
)
I don't really understand why I should want to pass the "Protected" component as a property and then have to take care of spreading all the ...props and ...rest.
Before I was reading this doc (and other example), I created the following code, which just nest the routes in another component which takes care of the authentication part.
Because my example (which seems to work perfectly well), looks way more simplistic, I must be missing something.
Are there any downsides on this approach?
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
import Nav from './Nav';
// dummy
const Auth = {
isAuthenticated: () => { return true; }
}
const Home = () => <h1>Home</h1>
const SignIn = () => <h1>SignIn</h1>
const About = () => <h1>About</h1>
class PrivateOne extends Component {
render() {
console.log(this.props);
return <h1>Private</h1>
}
}
const PrivateTwo = () => <h1>PrivateTwo</h1>
const PrivateThree = () => <h1>PrivateThree</h1>
const NotFound = () => <h1>404</h1>
const Private = ({isAuthenticated, children}) => {
return(
isAuthenticated ? (
<div>
<h1>Private</h1>
{children}
</div>
) : (
<Redirect to={{
pathname: '/sign_in',
}}/>
)
)
}
const App = () =>
<div>
<Router>
<div>
<Nav />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/sign_in" component={SignIn} />
<Private isAuthenticated={Auth.isAuthenticated()}> {/* or some state later on */}
<Route path="/private1" component={PrivateOne} />
<Route path="/private2" component={PrivateTwo} />
<Route path="/private3" component={PrivateThree} />
</Private>
<Route component={NotFound} />
</Switch>
</div>
</Router>
</div>
export default App;
I am trying to create some protected in routes in React, using Create React App 2 and React Router 4. I used Tyler McGinnis's Protected Routes article as an example. Here is the my basic app component.
class App extends Component {
constructor(props) {
super(props);
this.state = { loggedIn: false };
}
componentDidMount() {
console.log('did mount');
this.setState({ loggedIn: true });
}
render() {
fakeAuth.authenticate(this.state.loggedIn);
console.log('render');
return (
<Router>
<Fragment>
<Login />
<PrivateRoute path="/register" component={Register} />
<Chordsheets />
<Chordsheet />
</Fragment>
</Router>
);
}
}
export default App;
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route
{...rest}
render={props => (
fakeAuth.isAuthenticated === true
? <Component {...props} />
: <Redirect to="/" />
)}
/>
);
const fakeAuth = {
isAuthenticated: false,
authenticate(state) {
this.isAuthenticated = state;
console.log('isAuthenticated', this.isAuthenticated);
}
};
const Login = () => (
<div>
<Route exact path="/" component={LoginForm} />
</div>
);
const Chordsheets = () => (
<Fragment>
<Route path="/chordsheets" component={Header} />
<Route path="/chordsheets" component={AllChordSheets} />
</Fragment>
);
const Chordsheet = () => (
<Fragment>
<Route path="/chordsheet/:id" component={Header} />
<Route path="/chordsheet/:id" component={ChordSheet} />
</Fragment>
);
const Header = () => {
return (
<header>
<nav className="links">
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/chordsheets/0">My Chordsheets</Link>
</li>
</ul>
</nav>
</header>
);
};
After the component mounts loggedIn is set to true. When going to a new route render is not called again, so I cannot get to the Register route.
Does anyone have any thoughts on how to structure this? Thanks!
I know that i'm late but i'm happy to help anyone he wants this functionality by taking a look to this protected-react-routes-generator
All you're going to do is to provide the routes as an array.
My app currently has three components, User to view a person's profile, Self for a user to view their dashboard, notifications, and settings and a login page.
Both User and Self share common components Nav and Side, where User would pass the self object and call the fetchUser action from redux to Nav and Side, while Self would pass the user and self object along with calling the fetchSelf action.
User.js
class User extends React.Component {
componentDidMount() {
this.props.fetchUser(this.props.username);
}
render() {
const { page, self, user } = this.props
return (
<main>
<Nav
self={self}
/>
<Side
page={page} user={user}
/>
<div>
.....
</div>
</main>
)
}
}
const mapStateToProps = state => ({
page: state.store.page,
self: state.store.self
});
export default connect(mapStateToProps, {fetchUser})(User);
Self.js
class Self extends React.Component {
componentDidMount() {
this.props.fetchSelf();
}
render() {
const { page, self } = this.props
return (
<main>
<Nav
self={self}
/>
<Side
page={page} self={self}
/>
{
tab === 'Dashboard'
? <Dashboard />
: tab === 'Notifications'
? <Notifications />
: tab === 'Settings'
? <Settings />
: null
}
</main>
)
}
}
const mapStateToProps = state => ({
page: state.store.page,
self: state.store.self
});
export default connect(mapStateToProps, {fetchSelf})(Self);
Login.js
class Login extends React.Component {
.....
handleChange = event => {
.....
}
render() {
return (
<div id="login">
.....
</div>
)
}
Side.js
const Side = (props) => {
const { page, self, user } = props;
return (
<aside>
{
page === 'user'
? <div>
<img src={'img/' + user.profile.avatar} alt={`${user.username}'s avatar`} />
</div>
: <div>
<img src={'img/' + self.profile.avatar} alt={`${self.username}'s avatar`} />
<div>
}
</aside>
)
}
What I'd like to do here is instead of using react-router like this
<BrowserRouter>
<Switch>
<Route path="/login" exact={true} component={Login} />
<Route path="/self" exact={true} component={Self} />
<Route path="/:username" component={User} />
</Switch>
</BrowserRouter>
I'd want to be able to do something like this instead
const LayoutForLoginAndSignup = (props) => {
return (
<div class="loginOrSignUp">
<ComponentToBePassedIn />
</div>
)
}
class LayoutWithNavAndSide extends React.Component {
componentDidMount() {
this.props.fetchSelf();
// this.props.fetchUser('someusername')
}
render() {
return (
<main>
<Nav self={this.props.self} />
<Side page={this.props.page} self={this.props.self} user={this.props.user} />
{Content of component that was passed in}
</main>
)
}
}
const mapStateToProps = state => ({
page: state.store.page,
self: state.store.self,
user: state.store.user
});
export default connect(mapStateToProps, {fetchUser, fetchSelf})(LayoutWithNavAndSide);
<BrowserRouter>
<Switch>
<LayoutForLoginAndSignup path="/login" exact={true} component={Login} />
<LayoutWithNavAndSide path='/self' component={Self} />
<LayoutWithNavAndSide path="/:username" component={User} />
</Switch>
</BrowserRouter>
Here's where I get confused as I'm still new to react/redux/react router, how do I get the component of User or Self to show up in the layout? how do I get it to call fetchUser (on componentDidMount) only if someone is accessing /someuser vice versa with fetchSelf only when they goto the /self route? is it possible to do the layout as a function rather than a class?
Create the component you will make a route for that contains both layouts and a condition.
const Layout = (props) => (
{props.layout ? <SelfLayout /> : <UserLayout />}
)
Create two layouts.
const SelfLayout = () => (
<div> Self Layout </div>
)
const UserLayout = () => )
<div> User Layout </div>
)
Create your route.
<Route path={`/layout/${this.state.somelayout}`} render={() => <Layout
layout={this.state.somelayout}/>} />
this.state.somelayout should be the conditional that decides which layout we are on and you can tailor it to the needs of your app this is just a guideline.