I have followed the react-router-redux example on the github page, but when I try to pass {this.props.children} to the IndexRoute and I try to log it, it's undefined.
The only error I get through the console is Warning: You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored, which by googling this error, it's just one of those errors that people say just ignore it since it doesn't affect any of the code (for some reason).
package.json
....
"react": "^0.14.7",
"react-redux": "^4.4.0",
"react-router": "^4.0.0",
"react-router-dom": "^4.0.0",
"react-router-redux": "^4.0.8",
"redux": "^3.3.1",
"redux-thunk": "^1.0.3"
...
routes.js
import React from 'react';
import { Route, IndexRoute } from 'react-router';
import Items from "./components/Items"
import App1Container from "./containers/App1Container";
import ItemDetailContainer from "./containers/ItemDetailContainer";
export default (
<Route path="/" component={App1Container}>
<IndexRoute component={Items} />
<Route path="i/:id" name="item-detail" component={ItemDetailContainer} />
</Route>
);
App.jsx
import React from "react"
import { render } from "react-dom"
import {
createStore,
compose,
applyMiddleware,
combineReducers,
} from "redux"
import { Provider } from "react-redux"
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
import { syncHistoryWithStore, routerReducer } from 'react-router-redux'
import { createBrowserHistory } from 'history';
import thunk from 'redux-thunk'
import * as reducers from './reducers'
import routes from './routes';
let finalCreateStore = compose(
applyMiddleware(thunk),
window.devToolsExtension ? window.devToolsExtension() : f => f
)(createStore);
let reducer = combineReducers({
...reducers,
routing: routerReducer
});
let store = finalCreateStore(reducer);
const history = syncHistoryWithStore(createBrowserHistory(), store);
const router = (
<Provider store={store}>
<Router history={history}>{routes}</Router>
</Provider>
);
render(router, document.getElementById('App'));
App1Container.jsx
import React from "react"
import Radium from "radium"
import { connect } from "react-redux"
import Headline from "../components/Headline"
#connect(state => ({
items: state.items,
}))
#Radium
export default class App1Container extends React.Component {
render() {
console.log(this.props.children)
return (
<div>
{/* just a an h1 tag with some text in it */}
<Headline/>
{this.props.children}
</div>
)
}
}
App1Container would render the Headline component successfully but not this.props.children.
In react-router v4 you no longer nest routes.
<Route path="/" component={App1Container}>
<IndexRoute component={Items} />
<Route path="i/:id" name="item-detail" component={ItemDetailContainer} />
</Route>
Move your routes into your App1Container considering you always want it displayed. Then in your App1Container, add routes as follows:
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
<Router>
<Switch>
<Route path="/" exact component={ Items } />
<Route path="/i/:id" name="item-detail" component={ ItemDetailContainer } />
</Switch>
</Router>
Related
I have tried to create a simple app that allows a user to create or edit exiting 'projects'.
I am running in to the error:
react.development.js:1476 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
//
at Routes (http://localhost:3000/static/js/bundle.js:154234:5)
at App
//
The code for my 'App.js' is:
import React from "react";
import { Routes, Route } from "react-router-dom";
import MainPage from "./MainPage";
//import LoginPage from "./LoginPage";
//<Route path="/login" element={<LoginPage />} />;
const App = () => {
return (
<Routes>
<Route path="/projects" element={<MainPage />} />
</Routes>
);
};
export default App;
Nothing renders in the browser but the console throws the above error. I thought the error was related to using a functional component, but that doesn't seem to fix it (or more likely I'm too daft to figure out what I've done wrong).
I originally had the following code:
import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import MainPage from './MainPage';
import LoginPage from './LoginPage';
const App = () => (
<Router>
<Switch>
<Route path="/login" component={LoginPage} />
<Route path="/projects" component={MainPage} />
</Switch>
</Router>
);
export default App;
I realised 'switch' needed to be replaced with 'routes' and based on other online documentation used the 'elements' prop instaed of the component prop.
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import MainPage from './MainPage';
import LoginPage from './LoginPage';
const App = () => {
return (
<Routes>
<Route path="/login" element={<LoginPage />} />
<Route path="/projects" element={<MainPage />} />
</Routes>
);
};
export default App;`
Clearly this wan't the solution.
My MainPage.js code is:
import React, { useState, useEffect } from 'react';
import {
Button,
DataTable,
TableContainer,
Table,
TableHead,
TableRow,
TableBody,
TableCell,
} from 'carbon-components-react';
const MainPage = () => {
// State for the list of projects
const [projects, setProjects] = useState([]);
// Fetch the list of projects from the server when the component mounts
useEffect(() => {
fetch('/api/projects')
.then((res) => res.json())
.then((data) => setProjects(data.projects));
}, []);
// Function to handle creating a new project
const handleCreateProject = () => {
// Display a form for the user to enter the project's name
const projectName = window.prompt('Enter the name of the new project:');
// If the user entered a name, create the new project and add it to the list
if (projectName) {
fetch('/api/projects', {
method: 'POST',
body: JSON.stringify({ name: projectName }),
headers: { 'Content-Type': 'application/json' },
})
.then((res) => res.json())
.then((data) => setProjects([...projects, data.project]));
}
};
return (
<div>
<h1>My Projects</h1>
<Button onClick={handleCreateProject}>Create New Project</Button>
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell>Name</TableCell>
</TableRow>
</TableHead>
<TableBody>
{projects.map((project) => (
<TableRow key={project.id}>
<TableCell>{project.name}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</div>
);
};
export default MainPage;
The LoginPage was just a placeholder (removed in the updated App.js).
My index.js code is:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
My package.json dependencies are:
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
Update:
Updated App.js now using RouterProvider, createBrowserRouter. This is now throwing a browser console error:
Cannot read properties of undefined (reading 'map')
This seems to be coming from
return routes.map((route) => {
In the components.tsx file.
Current App.js code is:
import React from "react";
import { RouterProvider, createBrowserRouter } from "react-router-dom";
import { Routes, Route } from "react-router-dom";
import MainPage from "./MainPage";
//import LoginPage from "./LoginPage";
const router = createBrowserRouter();
const routes = [
{ path: "/projects", element: <MainPage /> },
//{ path: '/login', element: <LoginPage /> },
// add more routes here
];
const App = () => {
return (
<RouterProvider router={router}>
<Routes>
{routes.map((route) => (
<Route path={route.path} element={route.element} />
))}
</Routes>
</RouterProvider>
);
};
export default App;
The initial code:
import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import MainPage from './MainPage';
import LoginPage from './LoginPage';
const App = () => (
<Router>
<Switch>
<Route path="/login" component={LoginPage} />
<Route path="/projects" component={MainPage} />
</Switch>
</Router>
);
export default App;
When you updated from react-router-dom v5 to v6, i.e. replace the Switch component with the Routes component and changed the Route props, you appear to have dropped the Router component. A router is still required.
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import MainPage from './MainPage';
import LoginPage from './LoginPage';
const App = () => (
<Router>
<Routes>
<Route path="/login" element={<LoginPage />} />
<Route path="/projects" element={<MainPage />} />
</routes>
</Router>
);
export default App;
You shared your project's dependencies but I don't see react-router-dom listed as a project dependency. Ensure react-router-dom is actually installed and that the package.json file lists it as a dependency.
npm install --save react-router-dom#6
If you are trying to use the newer RRDv6.4+ Data APIs then you specify all the routes in the createBrowserRouter function. In your example it's not passed an array of routes, so this seems to be the cause of the mapping error. Pass the routes configuration array to createBrowserRouter. The RouterProvider also takes no children, it's self-closed.
import React from "react";
import { RouterProvider, createBrowserRouter } from "react-router-dom";
import { Routes, Route } from "react-router-dom";
import MainPage from "./MainPage";
import LoginPage from "./LoginPage";
// Routes configuration array
const routes = [
{ path: "/projects", element: <MainPage /> },
{ path: '/login', element: <LoginPage /> },
// add more routes here
];
// Pass configuration array
const router = createBrowserRouter(routes);
const App = () => {
return (
<RouterProvider router={router} />
);
};
If you are using latest react-router-dom v6.4+ then you need to add RouterProvider in your root file and create router configuration using createBrowserRouter .
Update your index.js
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { RouterProvider, createBrowserRouter } from "react-router-dom";
import MainPage from "./MainPage";
import LoginPage from "./LoginPage";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
const router = createBrowserRouter([
{
path: "/",
element: <MainPage />
},
{
path: "/login",
element: <LoginPage />
}
]);
root.render(
<StrictMode>
<RouterProvider router={router} />
</StrictMode>
);
I try to nest a route: I have a catalog of products in a Catalog component, which matches with url "backoffice/catalog".
I want to route to Edition component if the url matches with "backoffice/catalog/edit", but I need the Edition component to be a child of Catalog to share props.
I really don't understand why the nested route doesn't work, please save me ! And don't hesitate to tell me if anything is wrong with my App, I know JavaScript well, but I'm starting with React.
Here is my App component:
import React from "react";
import { Route, Switch } from "react-router-dom";
import { Home } from "./components/Static/Home.js";
import { Dashboard } from "./components/Backoffice/Dashboard.js";
import { Catalog } from "./components/Backoffice/catalog/Catalog.js";
import { Login } from "./components/Login/Login.js";
import { Signup } from "./components/Signup/Signup.js";
import { PrivateRoute } from "./components/PrivateRoute.js";
import "./scss/App.scss";
import {Header} from "./components/Structure/Header";
import {BOHeader} from "./components/Structure/Backoffice/Header";
import {List} from "./components/Listing/List";
function App()
{
return (
<div className="App">
<div className="App-content">
<Switch>
<Route path='/backoffice' component={BOHeader} />
<Route path='/' component={Header} />
</Switch>
<Switch>
<Route exact path='/' component={Home} />
<Route exact path='/login' component={Login} />
<Route exact path='/signup' component={Signup} />
<Route path='/listing' component={List}/>
<PrivateRoute exact path='/backoffice' component={Dashboard}/>
<PrivateRoute exact path='/backoffice/catalog' component={Catalog}/>
</Switch>
</div>
</div>
);
}
export default App;
Here is my Catalog component (the route is made in the render method:
import React from 'react';
import Data from '../../../Utils/Data';
import {Product} from './Product';
import {Edition} from './Edition';
import {
BrowserRouter as Router,
Switch,
Route,
Link,
useRouteMatch,
useParams
} from "react-router-dom";
export class Catalog extends React.Component
{
state = {
title: '',
products: [],
editionProduct: null
};
obtainProducts = () =>
{
Data.products.obtain()
.then(products => {this.setState({products: products});})
};
editProductHandler = product =>
{
this.setState({editionProduct: product});
};
saveProductHandler = product =>
{
Data.products.save(product).then(() => {
this.state.products.map(item => {
item = item._id === product._id ? product : item;
return item;
})
});
};
deleteProductHandler = event =>
{
const productId = event.target.closest('.product-actions').dataset.productid;
let products = this.state.products.filter(product => {
return product._id !== productId;
});
this.setState({products: products}, () => {
Data.products.remove(productId);
});
};
displayProducts = () =>
{
return this.state.products.map(product => {
return (
<li key={product._id} className='catalog-item'>
<Product
deleteProductHandler={this.deleteProductHandler}
editProductHandler={this.editProductHandler}
data={product}
/>
</li>
)
});
};
componentWillMount()
{
this.obtainProducts();
}
render() {
const Products = this.displayProducts();
let { path, url } = useRouteMatch();
return (
<div className={this.state.editionProduct ? 'catalog edit' : 'catalog'}>
<h1>Catalog</h1>
<Switch>
<Route exact path={path}>
<ul className='catalog-list'>{Products}</ul>
</Route>
<Route path={`${path}/edit`}>
<Edition saveProductHandler={this.saveProductHandler} product={this.state.editionProduct} />
</Route>
</Switch>
</div>
);
}
}
Any ideas?
You can't use hooks inside Catalog component because it is a class component. So you have two ways to resolve your issue:
Rewrite your component from class to functional.
Do not use useRouteMatch inside Catalog component. If you need to get match data inside a component, you need to use withRouter high-order component.
So if you select second way, you will need to wrap your Catalog component in withRouter:
export default withRouter(Catalog);
Change one row in render function from:
let { path, url } = useRouteMatch();
To:
const { path, url } = this.props.match;
And do not forget to change the import of your Catalog component, because now your component exports as default.
As I had the same issue when setting up my React Router with Typescript, I will detail a little bit more Andrii answer in 4 steps:
1 - npm/yarn packages
yarn add react-router-dom --save
yarn add #types/react-router-dom --save-dev
or
npm install react-router-dom --save
npm install #types/react-router-dom --save-dev
2 - index.tsx
1) When importing your higher order component (App in the present case), do not use curly brackets as App will be exported as default;
2) BrowserRouter needs to be in a upper level rather the class that will be exported as "default withRouter(Class)", in order to prevent the following error:
"You should not use Route or withRouter() outside a Router"
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import * as serviceWorker from './serviceWorker';
import App from './app';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
serviceWorker.unregister();
3 - app.tsx
1) Import from react-router-dom, withRouter & RouteComponentProps (or your own PropType definition);
2) Extend React.Component and use the RouteComponentProps interface;
3) Pass the props to components you want to share routing data;
4) Export the higher order class as default withRouter.
import React, { ReactElement } from 'react';
import { Switch, Route, withRouter, RouteComponentProps } from 'react-router-dom';
import { ExpensesPage } from './pages/expenses/expenses.page';
import { HomePage } from './pages/home/home.page';
import { HeaderComponent } from './components/header/header.component';
import './app.scss';
class App extends React.Component<RouteComponentProps> {
public render(): ReactElement {
return (
<div className='playground'>
<HeaderComponent {...this.props} />
<div className="playground-content">
<Switch>
<Route exact path='/' component={HomePage} {...this.props} />
<Route exact path='/expenses' component={ExpensesPage} {...this.props} />
</Switch>
</div>
</div>
);
}
}
export default withRouter(App);
4 - header.component
Through your RouteComponentProps extending your class, you can access normally the routing props as history, location and match as bellow:
import React, { ReactElement } from 'react';
import { RouteComponentProps } from 'react-router-dom';
import './header.component.scss';
export class HeaderComponent extends React.Component<RouteComponentProps> {
public render(): ReactElement {
const { location } = this.props;
console.log(location.pathname);
return (
<header className="header">
{/* ... */}
</header >
);
}
}
Hope it helps because I had a bit of challenge to make this works in a simple environment with webpack and no redux. Last time working properly with the following versions:
{
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2",
"sass-loader": "^8.0.2",
"style-loader": "^1.1.3",
"typescript": "^3.8.2",
"webpack": "^4.41.6",
"webpack-dev-server": "^3.10.3",
},
{
"#types/react-router-dom": "^5.1.3",
"webpack-cli": "^3.3.11"
}
Try adding useParams when you export like:
export default (props) => <NewComponent {...props} {...useParams()} />
Full example:
<Route exact path='/event/:id' element={<NewComponent />}/>
inport {useParams } from "react-router-dom";
class NewComponent extends React.Component {
render() {
return <div>{this.props.id}</div>
}
}
// Bind url parameters here
export default (props) => <NewComponent {...useParams()} {...props} />
I have upgraded to react-router v4, React v16, react-router-redux v5.0.0-alpha.9. After going through the tutorials in internet I finally end up with configuring my routes, Redux store and history as like below but the routes are not working. If I click on login/register or other links it is taking me to NotFound component always.
I am very new to these latest versions.
Routes.js
import React from 'react';
import {default as history} from './history';
import { Switch, Redirect, IndexRedirect, IndexRoute, BrowserRouter as Router, Route, Link } from 'react-router-dom';
import {Provider} from 'react-redux';
import store from './store'
import {Map, toJS} from 'immutable';
import TransparentIndexPage from './Navigation/Components/TransparentIndexPage'
// Import miscellaneous routes and other requirements
import App from './App';
import NotFound from './Layout/Components/NotFound';
// Import static pages
import Home from './Layout/Components/Home';
import Contact from './Contact/Components/Contact';
import Settings from './Navigation/Components/Settings';
import CreatePage from './CreatePage/Components/CreatePage';
import {getCurrentUser, extractRoleInfo} from './Login/utils'
import Careers from './About/Components/Careers';
import Team from './About/Components/Team';
import Press from './About/Components/Press';
import Policy from './About/Components/Policy';
// import About from './About/Components/About';
// Import authentication related pages
import Login from './Login/Components/Login';
import ProfileView from './MyProfile/Components/ProfileView';
import Confirmation from './Email/Components/Confirmation';
import About from './About/Components/About';
import Register from './Register/Components/Register';
// import Facebook from './Facebook/Components/FacebookLogin';
import Logout from './Logout/Components/Logout';
import Profile from './Profile/Components/Profile';
// import UserDropdown from './Layout/Components/UserDropdown';
import ForgotPassword from './ForgotPassword/Components/ForgotPassword';
import ResetPassword from './ResetPassword/Components/ResetPassword';
import {syncHistoryWithStore} from 'react-router-redux'
// Import dashboard pages
import Dashboard from './Dashboard/Components/Dashboard';
import Search from './Search/Components/Search';
import Post from './Post/Components/Post';
import * as loginActions from './Login/actions';
import { ConnectedRouter, routerReducer, routerMiddleware } from 'react-router-redux'
// const history = createHistory();
// const history = syncHistoryWithStore(browserHistory, store, {
// selectLocationState: state => state.get('Routes').toJS()
// })
// console.log("History: ", JSON.stringify(history));
function redirectIfAuth(nextState, replace) {
const user = getCurrentUser(store.getState())
if (user.get('id')) {
replace({
pathname: 'dashboard',
state: { nextPathname: nextState.location.pathname}
})
}
}
var update = 0
function checkRoles(nextState, replace) {
const user = getCurrentUser(store.getState())
console.log("Role extract user: ", JSON.stringify(extractRoleInfo(user.get('role'))))
if (!extractRoleInfo(user.get('role'))) {
var url = window.location.href
var refURL = ''
let x = window.location.href.split('/')
for(let v=5; v<x.length; v++)
{
refURL += x[v]
}
if(refURL)
{
if(update == 0)
{
update = 1
store.dispatch(loginActions.setURL(refURL))
}
}
replace({
pathname: '/login',
state: { nextPathname: nextState.location.pathname }
})
}
}
const routes = (
<Provider store={store}>
<ConnectedRouter history={history}>
<div>
<Route exact path="/" component={App} />
<Switch>
<Route path="login" component={Login} onEnter={redirectIfAuth}/>
<Route path="contact" component={Contact} />
<Route path="home" component={Home} />
<Route path="about" component={About} />
<Route path="careers" component={Careers} />
<Route path="press" component={Press} />
<Route path="policy" component={Policy} />
<Route path="team" component={Team} />
<Route path="home" component={Home} />
<Route path="register" component={Register} />
<Route path="about" component={About} />
<Route path="forgotpassword" component={ForgotPassword} onEnter={redirectIfAuth}/>
<Route path="resetpassword/:resetToken" component={ResetPassword}/>
<Route path="confirmation/:token" component={Confirmation} />
<Route path="dashboard" name='Dashboard' component={Dashboard} onEnter={checkRoles}/>
<Route path="/:id/myProfile" name='ProfileView' component={ProfileView} onEnter={checkRoles}/>
<Route path="create-page" name='ProfileView' component={CreatePage} onEnter={checkRoles}/>
<Route path="/:id/profile" name='Profile' component={Profile} onEnter={checkRoles}/>
<Route path=":loginId" name="NT" component={TransparentIndexPage} onEnter={checkRoles}>
<Switch>
<Route path="post" name='Post' component={Post} />
<Route path="search" component={Search} />
<Route path="settings" component={Settings} />
</Switch>
</Route>
<Route path="*" component={NotFound}/>
</Switch>
</div>
</ConnectedRouter>
</Provider>
)
export default routes
history.js
import createBrowserHistory from 'history/createBrowserHistory';
import createMemoryHistory from 'history/createMemoryHistory';
export default process.env.BROWSER ? createBrowserHistory() : createMemoryHistory();
store.js
/*eslint no-unused-vars: ["error", { "argsIgnorePattern": "^_" }]*/
import {Map} from 'immutable';
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer';
import browserStorage from './browserStorage';
import { routerReducer, routerMiddleware, push } from 'react-router-redux';
import {default as history} from './history';
const middlewareHistory = routerMiddleware(history);
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
//sessionmiddleware is not required as we are using jsonwebtoken
const sessionMiddleware = _store => next => action => {
let result = next(action)
switch(action.type) {
case 'LOGIN_SUCCESS':
browserStorage.set({
realUser: {
loginId: action.user.id,
token: action.token
},
currentUser: {
loginId: action.user.id,
token: action.token
}
})
break;
case 'USER_LOGOUT_SUCCESS':
localStorage.clear()
break;
default:
break;
}
return result
}
const store = createStore(
reducer,
Map(),
composeEnhancers(
applyMiddleware(
sessionMiddleware,
middlewareHistory,
thunk
),
window && window.devToolsExtension ? window.devToolsExtension() : f => f
)
);
export default store;
Did you try to put a "/" before your route names like :
<Route path="/contact" component={Contact} />
Pages switching normaly, but URL doesn't change when click to another page, and after refreshing page, I redirect to the home page
my index.js
import React from 'react'
import {
render
} from 'react-dom'
import {
Provider as ReduxProvider
} from 'react-redux'
// import { Provider as IntlProvider } from './components/Intl'
import {
Router,
Route,
IndexRoute,
Link,
Redirect,
browserHistory
} from 'react-router'
import App from './containers/App'
import Home from './containers/Home/Home'
import Course from './containers/Course/Course'
import Feedback from './containers/Feedback/Feedback'
import Revenue from './containers/Revenue/Revenue'
import Income from './containers/Revenue/Income'
import IncomeOver from './containers/Revenue/IncomeOver'
import {
routerMiddleware
} from 'react-router-redux'
import {
IntlProvider,
addLocaleData
} from 'react-intl'
import en from 'react-intl/locale-data/en'
import zh from 'react-intl/locale-data/zh'
addLocaleData([...en, ...zh])
import {
createStore,
compose,
applyMiddleware
} from 'redux'
import Immutable from 'immutable'
import {
combineReducers
} from 'redux-immutable'
import thunk from 'redux-thunk'
render((
<ReduxProvider >
<IntlProvider locale={'en'}>
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="Course" component={Course}/>
<Route path="Feedback" component={Feedback}/>
<Route path="/Revenue" component={Revenue}>
<IndexRoute component={Income}/>
<Route path="Income" component={Income}/>
<Route path="IncomeOver" component={IncomeOver}/>
</Route>
</Route>
</Router>
</IntlProvider>
</ReduxProvider>
), document.getElementById('mount'))
Pages in Nav bar look like this:
<li><Link to="/Revenue" activeClassName="activelink">REVENUE MANAGEMENT</Link></li>
Why I don't get URL, When I move to another page?
Facing an issue with React Tab events with mobile devices. I am getting an error below. My main issue is that I am not sure should I still use react-tao-event-plugin or is there some react native way to deal with this?
I have "react-tap-event-plugin": "^1.0.0" installed as npm package. I am also calling the tap event seem my, main.js, app.js and route.js files.
Warning: Unknown prop `onTouchTap` on <button> tag. Remove this prop from the element.
in button (created by EnhancedButton)
in EnhancedButton (created by RaisedButton)
in div (created by Paper)
in Paper (created by RaisedButton)
in RaisedButton (created by MaterialButton)
in MaterialButton (created by Home)
in div (created by Home)
in div (created by Home)
in div (created by Home)
in Home (created by Connect(Home))
in Connect(Home) (created by RouterContext)
in div (created by App)
in MuiThemeProvider (created by App)
in App (created by RouterContext)
in RouterContext
in Provider
Main.js -->
import 'whatwg-fetch';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import { Router, browserHistory } from 'react-router';
import injectTapEventPlugin from 'react-tap-event-plugin';
import configureStore from './store/configureStore';
import getRoutes from './routes';
// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();
const store = configureStore(window.INITIAL_STATE);
ReactDOM.render(
<Provider store={store}>
<Router history={browserHistory} routes={getRoutes(store)}/>
</Provider>,
document.getElementById('app')
);
App.js -->
import React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Header from './Header';
import Footer from './Footer';
class App extends React.Component {
render() {
return (
<MuiThemeProvider>
<div>
<Header/>
{this.props.children}
<Footer/>
</div>
</MuiThemeProvider>
);
}
}
export default App;
Routes.js -->
import React from 'react';
import { IndexRoute, Route } from 'react-router';
import App from './components/App';
import Home from './components/Home';
import Contact from './components/Contact';
import NotFound from './components/NotFound';
import Login from './components/Account/Login';
import Signup from './components/Account/Signup';
import Profile from './components/Account/Profile';
import Forgot from './components/Account/Forgot';
import Reset from './components/Account/Reset';
export default function getRoutes(store) {
const ensureAuthenticated = (nextState, replace) => {
if (!store.getState().auth.token) {
replace('/login');
}
};
const skipIfAuthenticated = (nextState, replace) => {
if (store.getState().auth.token) {
replace('/');
}
};
const clearMessages = () => {
store.dispatch({
type: 'CLEAR_MESSAGES'
});
};
return (
<Route path="/" component={App}>
<IndexRoute component={Home} onLeave={clearMessages}/>
<Route path="/contact" component={Contact} onLeave={clearMessages}/>
<Route path="/login" component={Login} onEnter={skipIfAuthenticated} onLeave={clearMessages}/>
<Route path="/signup" component={Signup} onEnter={skipIfAuthenticated} onLeave={clearMessages}/>
<Route path="/account" component={Profile} onEnter={ensureAuthenticated} onLeave={clearMessages}/>
<Route path="/forgot" component={Forgot} onEnter={skipIfAuthenticated} onLeave={clearMessages}/>
<Route path='/reset/:token' component={Reset} onEnter={skipIfAuthenticated} onLeave={clearMessages}/>
<Route path="*" component={NotFound} onLeave={clearMessages}/>
</Route>
);
}
Try adding the
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
in the components where it is being used, instead of on the top main.js level.