I am working on my first meteor/react application and I am trying to use react-router. However, when I try to run the app, I can't seem to import the renderRoutes function.
I am trying to follow along with the router part here:
https://guide.meteor.com/react.html
The router lives in myapp/client/lib/router.js. Here is my router code:
import React from 'react';
import { Router, Route, Switch } from 'react-router';
import createBrowserHistory from 'history/createBrowserHistory';
import {Home} from '../home/home.js';
import {Login} from '../login/login.js';
import {Connect} from '../connect/connect.js';
const browserHistory = createBrowserHistory();
export const renderRoutes = () => (
<Router history={browserHistory}>
<Switch>
<Route exact path="/" component={Home}/>
<Route exact path="/login" component={Login}/>
<Route exact path="/connect" component={Connect}/>
</Switch>
</Router>
);
I have a meteor.startup() function in myapp/server/main.js, this is all I have in there:
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import { renderRoutes } from '../client/lib/router.js';
Meteor.startup(() => {
render(renderRoutes(), document.getElementById('App'));
});
When I try to run meteor run, here's what I see:
Error: Cannot find module '../client/lib/router.js'
Why? Any help is appreciated!
It is because your router is located in
myapp/client/lib/router.js
whereas your main file is located in
myapp/server/main.js
So unless you intend to implement server-side-rendering, you may move the second code to
myapp/client/main.js
This is due to Meteor's project-structure awareness. If a file is contained in a folder, named client or server it will only be available in this environment.
More to read in the guide: https://guide.meteor.com/structure.html#special-directories
Related
routing_page..
i used 2 switch statement first for Route and second for PrivateRoute..
and after login and getting token in local storage....when i visit to the privateroute it shows blank page only.....
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import LoginPage from "./Pages/Login_page";
import {Route,Switch,BrowserRouter as Router} from "react-router-dom";
import SignupPage from "./Pages/signup_page";
import Noting_page from "./Pages/home_notingPage";
import INdividualNotes from './Pages/allNotesOfUser';
import Editing_page from './Pages/editingPage';
import PrivateRoute from './components/private';
ReactDOM.render(
<Router>
<Switch>
<Route exact path="/login"><LoginPage/></Route>
<Route path="/signup"><SignupPage/></Route>
<Switch>
<PrivateRoute path="/notes" component={INdividualNotes}/>
<PrivateRoute path="/home" component={Noting_page}/>
<PrivateRoute path="/login/edit" component={Editing_page}/>
</Switch>
</Switch>
</Router>,
document.getElementById('root')
);
Private.js
i am using token here for auth
import { render } from "#testing-library/react";
import React, { useEffect, useState } from "react";
import { Route ,useHistory,Redirect, useLocation, Switch} from "react-router-dom";
function PrivateRoute({component:component,...rest}){
return(
<Route {...rest}
render={ props=>
localStorage.getItem("token")?
<component {...props}/>
:
<Redirect to={{pathname:"/login",state:{from:props.location}}}/>
} />)
}
export default PrivateRoute;
I think it is something related to the naming convention of components. Your component is written in small letters. If you just change {component: Component} in PrivateRoute file and then where you using your component <component> replace this with <Component>, It will render the page. Perhaps it is not mentioned anywhere in official docs or maybe it is happening due to react-router plugin.
I want to insert via URL some data like an ID.
Example: somewebsite.com/movie/(ID_GOES_HERE)
But i can't understand how to make it happen. I want the data to go in the url and i want to retrieve it in movie.js, how do i do that?
I installed router dom in the app.
import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Switch, Route} from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';
import App from './App';
import MovieDetail from './Movie';
const history = createBrowserHistory();
ReactDOM.render(
<Router history={history}>
<Switch>
<Route exact path='/' component={App}/>
<Route path='/movie' component={Movie}/>
</Switch>
</Router>,
document.getElementById('root')
);
It is expected to show the ID in Movie.
From react-router documentation:
./App
<Route path="/movie/:movie_id" component={Movie} />;
./Movie
// All route props (match, location and history) are available to Movie
export function Movie(props) {
return <h1>Show movie {props.match.params.movie_id}!</h1>;
}
I'm very new to ReactJS. I was trying some tutorials to do routing but end up with errors where the "browserHistory" was undefined. The code and error message is as below.
Main.js
'use strict';
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, IndexRoute, hashHistory,browserHistory} from 'react-router';
import App from './App.jsx';
import {Home,About,Contact} from './App.jsx';
ReactDOM.render((
<Router history = {browserHistory}>
<Route path = "/" component = {App}>
<IndexRoute component = {Home} />
<Route path = "home" component = {Home} />
<Route path = "about" component = {About} />
<Route path = "contact" component = {Contact} />
</Route>
</Router>
), document.getElementById('app'))
Error Message from browser console
Warning: Failed prop type: The prop history is marked as required in
Router, but its value is undefined.in Router
Kindly let me know if the implementation is out-of-date or if I have missed out any libraries to face this problem
I think I have found the reason, the new react-router does not support browserHistory anymore. To achieve the same goal I have used the following code.
import createBrowserHistory from 'history/createBrowserHistory';
const history = createBrowserHistory();
Can you try useRouterHistory:
import { useRouterHistory } from 'react-router';
import createBrowserHistory from 'history/lib/createBrowserHistory';
const createAppHistory = useRouterHistory(createBrowserHistory);
const history = createAppHistory({
parseQueryString: parse,
stringifyQuery: stringify
})
<Router history={history}/>
React Router v4 changed things. They made separate top level router elements. Replace <Router history={hashHistory}> with <HashRouter> in your code.
import {HashRouter,Route} from 'react-router-dom';
<HashRouter>
<Route path = "/" component = {App} />
</HashRouter>
The default react-router is used as such:
import * as React from 'react';
import { Router, Route, hashHistory } from 'react-router';
const routing = (
<Router history={hashHistory}>
<Route path="/login" component={Login}/>
</Router>
};
When I include the "react-router-relay" library, it adds functionality to the Router. Namely it adds 2 properties to the Router component (render and environment):
import * as React from 'react';
import * as Relay from 'react-relay';
import * as useRelay from 'react-router-relay';
import { Router, Route, hashHistory, applyRouterMiddleware } from 'react-router';
const routing = (
<Router history={hashHistory} render={applyRouterMiddleware(useRelay)} environment={Relay.Store}>
<Route path="/login" component={Login}/>
</Router>
};
How would I go about augmenting the react-router typings?
I've tried a bunch of approaches, latest being:
import { Router } from 'react-router';
declare module 'react-router' {
namespace Router {
export interface RouterProps {
environment?: any
}
}
}
As I need to extend the namespace "Router" and the interface "RouteProps" under it.
Link to React router typings: https://www.npmjs.com/package/#types/react-router
The React-router-relay library does not have any typings itself.
All of the information Ive found about this topic:
https://github.com/Microsoft/TypeScript/issues/11034
https://github.com/typings/typings/issues/611
so the problem seems to be that react typings don't ever export the namespaces
so it becomes impossible to augment them
Try this one
declare module 'react-router' {
interface RouterProps {
environment?: any
render?: any
}
}
it's working with the latest react-router definitions.
<Router history={hashHistory} render={applyRouterMiddleware(useRelay)} environment={Relay.Store}>
<Route path="/login" component={Login}/>
</Router>
Looks like login (component={Login}) is not Imported.Hence, It always return an error.
What should I change in my config/routes.js file to make it use modules/router files written for the React front-end ?
config/routes.js file:
module.exports: {}
module/router.js:
import React from 'react'
import { Route, IndexRoute } from 'react-router'
import App from './App'
import About from './About'
import Repos from './Repos'
import Repo from './Repo'
import Home from './Home'
module.exports = (
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="/repos" component={Repos}>
<Route path="/repos/:userName/:repoName" component={Repo}/>
</Route>
<Route path="/about" component={About}/>
</Route>
)
I am using webpack, babel for bundling. Really stuck with this.
Currently, the first page is rendered by assets/index.html but if I refresh from any other page (whose address is not /), I get 404 from the server, even though the path is defined in the react router file.
Please help.
EDIT
Here's my index.js file (serves as the React entry point):
import React from 'react'
import { render } from 'react-dom'
import { Router, browserHistory } from 'react-router'
import routes from './routes'
render(
<Router routes={routes} history={browserHistory}/>,
document.getElementById('app')
)