I'm gonna post some code, because it appears I have not included something.
import React from 'react';
import { connect } from 'react-redux';
import {bindActionCreators} from 'redux';
import {updateSearch, getSearchResults} from '../actions/qb-actions';
import {valueAccepted} from '../actions/tree-actions';
import {addNewElement} from '../services/commonComponents';
import QueryBuilder from './QueryBuilder';
import SearchResults from './SearchResults';
import FontAwesome from 'react-fontawesome';
import {checkIncludeColumns} from '../services/commonComponents';
import {removeSpaces} from '../services/values';
import { Button } from 'reactstrap';
class SearchBooksAdvanced extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
componentDidMount(){
const { match: { params } } = this.props;
//I want to use match.params here, but it is coming back undefined.
}
qb=()=>{
}
postResults = () => {
this.qb();
}
render() {
return (<div >
<QueryBuilder postResults={this.postResults}/>
<SearchResults
qb={qb => {this.qb = qb}}
tree={this.props.tree.tree}
/>
</div>);
}
}
function mapStateToProps(state){
return{
options: state.options,
tree: state.tree,
goToSearch: state.goToSearch
};
}
export default connect(mapStateToProps, {updateSearch, getSearchResults})(SearchBooksAdvanced);
A little abbreviated class. Here is where I am calling my routings:
<main>
<Switch>
<AuthenticatedRoute login={this.props.login} path={`${this.props.match.path}`} exact component={Landing} isLoggedOut={this.props.login.ckUser.isLoggedOut}/>
<AuthenticatedRoute login={this.props.login} path={`${this.props.match.path}/search/:searchID`} exact component={SearchBooksAdvanced} isLoggedOut={this.props.login.ckUser.isLoggedOut}/>
<AuthenticatedRoute login={this.props.login} path={`${this.props.match.path}/book/:bookID`} exact component={BookDetail} isLoggedOut={this.props.login.ckUser.isLoggedOut}/>
<AuthenticatedRoute login={this.props.login} path={`${this.props.match.path}/routing/:routingID/:versionID`} exact component={RoutingDetail} isLoggedOut={this.props.login.ckUser.isLoggedOut}/>
<Redirect to={`${this.props.match.url}`} />
</Switch>
</main>
My AuthenicatedRoute class is as follows:
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
const AuthenticatedRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={props =>
(
!props.isLoggedOut && localStorage.getItem('user') ?
<Component {...props}/>
:
<span><Redirect to={{
pathname: '/bis/login',
state: { from: props.location }
}}/><span>redirected</span></span>
)}/>
);
export default AuthenticatedRoute
What is weird here, is my props.match.params.someID worked for my other two classes, but when I called it for SeachBooksAdvanced class it fails to find it. Please let me know if you see an inconsistency in my code. TIA.
You want to use the withRouter HOC on route components that you use connect on.
import { withRouter } from "react-router-dom";
// ...
export default withRouter(
connect(
mapStateToProps,
{ updateSearch, getSearchResults }
)(SearchBooksAdvanced)
);
Related
I'm testing some function, I discover a solution but I'm not sure that is correct way.
I need to load data from API so I used axios, and I need to share data between some child routes, I am currently using simple setState to keep values and passed them to the Route Components to be used.
Here is the MainContainer component
import React from 'react';
import axios from 'axios';
import { BrowserRouter, Route, Switch, Link, HashRouter, useLocation } from 'react-router-dom';
import Languages from './pages/Languages';
import Home from './pages/Home';
export default class MainContainer extends React.Component
{
constructor(props) {
super(props);
this.state = {
languages: null,
language:null,
}
}
get_init(language)
{
console.log("get_init")
var params = {
language:language,
}
axios
.get("https://xxxx.com/wp/it/api/init/")
.then(function(result) {
this.setState({languages:result.data.languages});
}.bind(this));
}
render() {
console.log("render")
return (
<div>
<Switch>
<Route path="/" component={() => <Languages get_init={this.get_init.bind(this)} languages={this.state.languages} />} exact />
<Route path="/:language/" component={(urlparam) => <Home language={urlparam.match.params.language} get_init={this.get_init.bind(this)} languages={this.state.languages} />} exact/>
<Route component={Error}/>
</Switch>
</div>
);
}
}
My Language Component is bellow
import axios from 'axios';
import React from 'react';
import LoaderData from './../helpers/LoaderData';
import { Link } from 'react-router-dom';
export default class Languages extends React.Component
{
constructor(props)
{
super(props);
if (props.languages==null)
{
this.props.get_init();
}
}
render() {
if (this.props.languages==null)
{
return '';
}
return (
<div>
<div className='main'>
LANGUAGE {Math.random()}<br/>
{
this.props.languages.map((language, i) =>
{
return (<div key={language.prefix}><Link to={language.prefix+"/"} >{language.name}</Link> <br/></div>)
})
}
</div>
</div>
);
}
}
is a correct way to build a website in react or there are better ways?
I'm a new to React.js with asp.net core, and I got an error that I don't understand.
I created protected route like that :
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import auth from './auth.js'
export const ProtectedRoute = ({ component: Component, ...rest }) => {
return (
<Route
{...rest}
render = {props => {
if(auth.estAuthentifier()){
return <Component {...props}/>
} else {
return <Redirect to={
{
pathname: "/",
state: {
from: props.location
}
}
} />
}
}}
/>
);
}
In my App.js, I added the protected route like that :
import React, { Component } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router';
import { Login } from './components/Login'
import { Layout } from './components/Layout';
import { Home } from './components/Home';
import { ProtectedRoute } from './components/protected.route';
export default class App extends Component {
static displayName = App.name;
render () {
return (
<div>
<Switch>
<Route exact path="/" component={Login} />
<Layout>
<ProtectedRoute exact path="/home" component={Home}/>
</Layout>
<Route path="*" component={() => "404 NOT FOUND"}/>
</Switch>
</div>
);
}
}
And, the Layout component render all components with my NavBar included :
import React, { Component } from 'react';
import { Container } from 'reactstrap';
import { NavMenu } from './NavMenu';
import '../css/Layout.css';
export class Layout extends Component {
static displayName = Layout.name;
render () {
return (
<div className="conteneur-principal">
<NavMenu />
<Container>
{this.props.children}
</Container>
</div>
);
}
}
The problem is the next : I put the logout button in my navigation bar component but when I'm trying to logout and redirect to Login, i got the following error : TypeError: Cannot read property 'push' of undefined
NavMenu.js :
import React, { Component } from 'react';
import { NavLink } from 'reactstrap';
import { Link } from 'react-router-dom';
import auth from './auth';
import { withRouter } from 'react-router-dom';
import '../css/SideBarNav.css';
export class NavMenu extends Component {
static displayName = NavMenu.name;
constructor(props) {
super(props);
console.log(this.props);
this.deconnexion = this.deconnexion.bind(this);
}
deconnexion = () => {
auth.logout(() => {
this.props.history.push('/'); //LINE IN ERROR
})
}
render () {
return (
<div className="conteneur-menu">
<img src="images/familieu-logo-clear.png" alt="logo-familieu" title="logo-familieu" className="is-clickable logo-familieu"/>
<div className="conteneur-link">
<NavLink tag={Link} className="menu-link" to="/">Home</NavLink>
</div>
<input type="button" value="Déconnexion" className="btn-deconnexion" onClick={this.deconnexion}/>
</div>
);
}
}
What should I do to make my logout button work ?
Thanks alot
In NavMenu.js you are importing the withRouter, but is not used.
Wrap the export of component with withRouter like this:
export default withRouter(NavMenu);
I have a project structure like that:
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import {store, persistor} from './helpers';
import { Main } from './main';
import { PersistGate } from 'redux-persist/integration/react';
import { InitIDB } from './helpers/InitIDB';
require('./bootstrap');
InitIDB();
render(
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<Main />
</PersistGate>
</Provider>,
document.getElementById('root')
);
This is entry point, and then the Main component:
import React from 'react';
import { Route, Switch, Router } from 'react-router-dom';
import { connect } from 'react-redux';
import { history } from '../helpers';
import {PrivateRoute} from "../components";
import { ProjectPage } from '../forms/project';
import { ProfilePage } from '../forms/profile';
import { Login } from '../forms/login';
class Main extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<React.Fragment>
<Router history={history}>
<Switch>
<Route exact path="/login" component={Login} />
<PrivateRoute exact path="/com/projects" component={ProjectPage} />
<PrivateRoute exact path="/com/profiles" component={ProfilePage} />
</Switch>
</Router>
</React.Fragment>
);
}
}
function mapState(state) {
const { alert } = state;
return { alert };
}
const actionCreators = {
clearAlerts: function() {}
}
const connectedApp = connect(mapState, actionCreators)(Main);
export { connectedApp as Main };
//PrivateRoute
import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import {LayoutX} from '../forms/layout';
export const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={props => (
sessionStorage.getItem('user')
? <LayoutX><Component {...props} /></LayoutX>
: <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
)} />
)
I want when user access private route, before that the program will send a request to server and it will return a response decide user can be access this page or not. I try to send a request with axios in PrivateRoute but it is async request and I can not get response before render. What should I do?
Your PrivateRoute should block render when waiting for the authentication status from API is returned.
You can take a look at a simple implementation of PrivateRoute I wrote in this codesandbox.
privateRoute.js
import React, { Component } from "react";
import { BrowserRouter, Route, Switch, Redirect, withRouter} from "react-router-dom";
import { connect } from "react-redux";
function AuthRoute({ component: Component, isAuth, ...rest }) {
console.log(isAuth);
let test = false;
return (
<Route
{...rest}
render={props =>
isAuth.isAuthenticated === true ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: "/login",
state: { from: props.location }
}}
/>
)
}
/>
);
}
const mapStateToProps = state => {
{
console.log(state);
return { isAuth: state.auth.isAuthenticated };
}
};
export default withRouter(connect(mapStateToProps, { pure: false })(AuthRoute));
App.js
import React, { Component } from "react";
import { BrowserRouter, Route, Switch, Redirect } from "react-router-dom";
import { library } from "#fortawesome/fontawesome-svg-core";
import PropTypes from "prop-types";
import {
faHome,
faClock,
faTasks,
faStickyNote,
faCalendarWeek
} from "#fortawesome/free-solid-svg-icons";
import { connect } from "react-redux";
import { loadUser, checkAuth } from "./actions/authActions";
import store from "./store";
import Home from "./Home";
import SideNav from "./Components/SideNav";
import Recent from "./Components/Recent";
import TopBar from "./Components/TopBar";
import AddNote from "./AddNote";
import LogIn from "./Components/LogIn/LogIn.js";
import Register from "./Components/Register/Register";
import ToDo from "./Components/ToDo/ToDo";
import AuthRoute from "./privateRoute";
library.add(faHome, faClock, faTasks, faStickyNote, faCalendarWeek);
class App extends Component {
constructor(props) {
super(props);
this.state = {
isAuthenticated: false
};
}
static propTypes = {
isAuthenticated: PropTypes.bool
};
componentDidMount() {
store.dispatch(loadUser());
// this.props.isAuthenticated();
}
LogInContainer = () => {
return <Route path="/login" component={LogIn} />;
};
RegisterContainer = () => {
return <Route path="/register" component={Register} />;
};
DefaultContainer = () => {
return (
<div className="app_container">
<SideNav />
<TopBar />
<Route exact path="/" component={Home} />
<Route path="/recent" component={Recent} />
<Route path="/AddNote" component={AddNote} />
<Route path="/ToDo" component={ToDo} />
</div>
);
};
render() {
return (
<div>
<h1> {this.props.auth.isAuthenticated.toString()}</h1>
<BrowserRouter>
<Switch>
<Route exact path="/login" component={this.LogInContainer} />
<Route exact path="/register" component={this.RegisterContainer} />
<AuthRoute component={this.DefaultContainer} />
</Switch>
</BrowserRouter>
</div>
);
}
}
const mapStateToProps = state => {
return { auth: state.auth };
};
export default connect(mapStateToProps)(App);
When the user logins, an action will be dispatched to authentication the user. In redux dev tools, I can see the user authenticated.
Within privateRoute.js, mapStateToProps is always matching the initial state and not the updated state so isAuth never equates to true and I can't show the protected route?
I've been stuck on this for days, I feel like I'm implementing this wrong however looking at other examples I can't see what I am doing wrong.
The issue is how you are mapping state to props. It looks like your store state is structured as { auth: { isAuthenticated: boolean } }. However in the private route map state to props, you are trying to access effectively auth.isAuthenticated.isAuthenticated which will always be false/undefined. You need to go level higher in your state structure when mapping state to props. Try updating the private route component to:
import React, { Component } from "react";
import { BrowserRouter, Route, Switch, Redirect, withRouter } from "react-router-dom";
import { connect } from "react-redux";
function AuthRoute({ component: Component, isAuth, ...rest }) {
console.log(isAuth);
let test = false;
return (
<Route
{...rest}
render={props =>
isAuth.isAuthenticated === true ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: "/login",
state: { from: props.location }
}}
/>
)
}
/>
);
}
const mapStateToProps = state => {
{
console.log(state);
return { isAuth: state.auth }; // change this line
}
};
export default withRouter(connect(mapStateToProps)(AuthRoute));
I have a NavBar that's on multiple pages that allows me to search for an user. After the searching, clicking on it should re-direct me to the user page via Link from react-router-dom. The problem is this only works on the main page, and doesn't work when clicking from an user's page.
I've tried adding WithRouter to all my related components (containers, parents, and the children). Also tried fiddling with the Route pathing / exact pathing syntax to no avail.
*Removed components imports and non-relavant code for clarity.
/app.jsx
import React from 'react';
import { Provider } from 'react-redux';
import {
Route,
Redirect,
Switch,
Link,
HashRouter,
withRouter,
} from 'react-router-dom';
import { AuthRoute, ProtectedRoute } from '../utils/route_utils';
const App = () => (
<div className="main">
<HashRouter>
<Switch>
<AuthRoute exact path="/" component={LoginContainer} />
<AuthRoute exact path="/signup" component={SignupContainer} />
<ProtectedRoute exact path="/feed" component={FeedContainer} />
<ProtectedRoute exact path="/users/:userId" component={GreetingContainer} />
<ProtectedRoute exact path="/posts/:postId" component={PostShowContainer} />
<ProtectedRoute exact path="/upload" component={Upload} />
<ProtectedRoute exact path="/accounts/edit" component={AccountsEditContainer} />
<Route component={Errors} />
</Switch>
</HashRouter>
</div>
);
export default withRouter(App);
/greeting_container.jsx
import React from 'react';
import { withRouter } from 'react-router-dom';
const mapStateToProps = (state, ownProps) => {
...
};
const mapDispatchtoProps = (dispatch) => ({
....
});
export default withRouter(connect(mapStateToProps, mapDispatchtoProps)(Greeting));
/greeting.jsx
import React from 'react';
import { Link } from 'react-router-dom';
import NavBarContainer from '../nav_bar/nav_bar_container';
class Greeting extends React.Component {
constructor(props) {
super(props);
this.renderPosts = this.renderPosts.bind(this);
}
render() {
if (!this.props.user) return null;
const profileUser = parseInt(this.props.match.params.userId)
const user = this.props.user
return (
<div className="user-page-container">
<Modal currentUser={user} />
<NavBarContainer />
</div>
}
export default Greeting;
/nav_bar_container.jsx
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import NavBar from './nav_bar';
const mapStateToProps = (state) => {
....
};
const mapDispatchToProps = (dispatch) => ({
...
});
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(NavBar));
/nav_bar.jsx
import React from 'react';
import { Link, withRouter } from 'react-router-dom';
import NavBarSearch from './nav_bar_search';
const NavBar = (props) => {
return (
<div>
< NavBarSearch
fetchSearchedUsers={props.fetchSearchedUsers}
searchResults={props.searchResults}
/>
</div>
);
};
export default withRouter(NavBar);
/nav_bar_search.jsx
import React from 'react';
import NavBarSearchResults from './nav_bar_search_results';
import { withRouter } from 'react-router-dom';
class NavBarSearch extends React.Component {
constructor(props) {
super(props);
this.state = {
searchInput: ''
}
this.generateSearch = this.generateSearch.bind(this)
}
render() {
return (
<div >
<input className="search-bar-test" onChange={this.generateSearch} type="text" placeholder='Search' />
{this.state.searchInput ? <NavBarSearchResults
searchResults={this.props.searchResults}
handleClick={this.handleClick}
// key={this.props.searchResults.id}
/> : null
}
</div>
)
}
}
export default withRouter(NavBarSearch);
/nav_bar_search_results.jsx
import React from 'react';
import { withRouter, Link } from 'react-router-dom';
const NavBarSearchResults = function({ searchResults, handleClick }) {
let results = searchResults ? Object.entries(searchResults).map((result) =>
<Link className="search-links" to={`/users/${result[0]}`} onClick={e => handleClick} key={result[0]}>
<div className="search-results-item">
<img className="search-results-image" src={result[1].photoUrl} />
{result[1].username}
</div>
</Link>
) : null
return (
<div className="search-results-container">
{results}
</div>
);
}
export default withRouter(NavBarSearchResults);
Once again, it is the Link in the Nav_Bar_Search_Results.jsx file that is not working. This file is nested several levels deep starting from the Greeting.jsx file. The string interpolation I'm doing is the user_id number. Please recall that the url parameters updates and the page works if I CLICK and REFRESH page, but not on first click alone.
The correct user page should render as specified by the url parameters