I am trying to implement react router but having few problems. Please find the code below:
import React from 'react';
import ReactDOM from 'react-dom';
import { App, Home, Signup } from './containers';
import routes from './routes';
import { BrowserRouter , Route } from 'react-router-dom'
ReactDOM.render(
<BrowserRouter>
<App>
<Route path='/' component={Home} />
<Route path='/signup' component={Signup} />
</App>
</BrowserRouter>,
document.getElementById('app')
);
The App.js file which I am using as a Layout is as below:
import React, { Component } from 'react';
import { Cheader } from '../components';
class App extends Component {
render() {
return(
<div>
<Cheader/>
{this.props.children}
</div>
)
}
}
export default App;
It works when I navigate to http://localhost:3000/, but it does not work when i try to navigate to http://localhost:3000/signup. The page displays the following error:
Cannot GET /signup
The code for signup components and containers is as below:
components: index.js, signuppage.js
import Cheader from './cheader';
import Signuppage from './signuppage';
import Homepage from './homepage';
export {
Cheader,
Homepage,
Signuppage
}
import React from 'react';
import { Grid, Row, Col } from 'react-bootstrap';
const Signuppage = () => (
<Grid>
<Row>
<Col xs={12} sm={12} md={12}>
This is test
</Col>
</Row>
</Grid>
);
export default Signuppage;
containers: index.js, Signup.js
import App from './App';
import Home from './Home';
import Signup from './Signup';
export {
App,
Home,
Signup
}
import React, { Component } from 'react';
import { Signuppage } from '../components';
class Signup extends Component {
render () {
return (
<Signuppage/>
)
}
}
export default Signup;
It seems to be working for the default path, but not for any other route. am I missing any configuration here. Please note that I am using react-router v4. Can anyone please let me know.
Thanks
It is expalined in this: React-router urls don't work when refreshing or writting manually
When you try to go to the link directly, your server cannot find a file match to signup.
Solution 1: Use HashRouter to replace BrowserRouter.
Solution 2: Use fallback technique to setup server that fall back to '/' when no file matched is found.
you have to add exact to the first route
<App>
<Route exact path='/' component={Home} />
<Route path='/signup' component={Signup} />
</App>
another thing can be that you missing pushState settings in your dev server configuration
if you use webpack, add:
devServer: {
port: 3000,
historyApiFallback: true
}
Related
I am fairly new to using react and been following a couple of tutorials on YT, I have ran into a problem with one of them. I copied everything line by line, but my text on 'Home' and 'Login' doesnt display! I get no errors, but the page remains blank.
here is App.js
import React from 'react'
import { Routes, Route, useNavigate } from 'react-router-dom';
import Login from './components/Login';
import Home from './container/Home';
const App = () => {
return (
<Routes>
<Route path="login" element={<Login />} />
<Route path="/*" element={<Home />} />
</Routes>
);
};
export default App;
Also the index.js file:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById('root'),
);
**Then Login.jsx
**
import React from 'react';
const Login = () => {
return (
<div>
Login
</div>
);
};
export default Login;
Finally Home.jsx
import React from 'react';``your text``
const Home = () => {
return (
<div>
Home
</div>
);
};
export default Home;
I know I am missing something, but I cant seem to find it! Any and all help is very much appreciated!
Tried to see if I am using on old version of the BroswerROuter/Routes in React, but I have very little knowledge to see the difference just yet!
I am trying to route to a class component but it gives me an error. When I change the component to a functional component, the routing works. How do I route to class components?
I am new to using react-router. I first had a functional component to route to. But once I realized the component needs to be a class, I changed it to a class and now the routing shows
"Cannot GET /explore/words'.
index.js
import React from "react";
import { render } from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.querySelector("#root")
);
App.js
import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import HomePage from "./pages/HomePage";
import ExplorePage from "./pages/ExplorePage";
function App() {
return (
<Router>
<div>
<header>
<nav>Course Finder</nav>
</header>
<Route path="/" component={HomePage} />
<Route path="/explore/:campus" component={ExplorePage} />
</div>
</Router>
);
}
export default App;
Explore.js
import React, { Component } from "react";
class ExplorePage extends Component {
render() {
return (
<div>
<h1>Explore</h1>
</div>
);
}
}
export default ExplorePage;
Expected result was to see the 'Explore' heading.
I get 'Cannot GET /explore/words' instead.
This is working fine, all you have to do is add /explore/one to url to see the route working.
https://codesandbox.io/embed/nervous-wood-cw8cd
I am new to react and still learning.
I am trying to add nested routes in my react project, so that a content of div changes based on the route.
Following are my components :-
//index.js
import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.min.css';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
library.add(faIgloo);
ReactDOM.render(<BrowserRouter>
<App />
</BrowserRouter>, document.getElementById('root'));
serviceWorker.unregister();
// app.js
import React, { Component } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import Login from './components/login/login.js'
import Protected from './components/protected/protected.js'
import './App.css';
class App extends Component {
render() {
return (
<Switch>
<Route exact path="/protected" component={Protected}/>
<Route path="/login" component={Login}/>
</Switch>
);
}
}
export default App;
//protected.js
import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import Header from './header/header.js';
import './protected.css';
import CafePreview from './cafepreview/cafepreview.js'
class Protected extends Component {
render() {
const {match} = this.props;
return (
<div>
<Header></Header>
{/*<Preview/>*/}
<Switch>
<Route path='/protected/cafepreview' component={CafePreview}/>
</Switch>
</div>
);
}
}
export default Protected
// cafepreview.js
import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import './preview.css';
console.log("here");
class CafePreview extends Component {
render() {
return (
<div>
<div>
<i class="fa fas fa-arrow-left"></i>
<span> BACK TO ALL CAFES </span>
</div>
</div>
);
}
}
export default CafePreview
When i open '/protected' i can see the header coming, but when i try to open '/protected/cafepreview' i see an empty page instead of header with cafe preview html.
I tried some options mentioned in this stackoverflow thread Multiple Nested Routes in react-router-dom v4 but none of them worked.
I hope i have explained my problem clearly.
Check documentation https://reacttraining.com/react-router/web/api/Route/exact-bool. Remove exact from the route in the App component and it will start working.
its because you have set exact in the app.js file. Remove it from the particular route. It'll work
Having an issue with React Router v4 rendering components. On initial load of the application it will render the correct component corresponding to the URL However, any subsequent Link clicks will not render the desired component.
Libraries
React Router: 4.2.2
React: 15.6.1
React DOM: 15.6.1
-- just to mention libraries in case of impact --
React Redux: 5.0.6
Redux: 3.7.2
Material UI: 0.19.0
Going to omit some imports for sake of brevity
Site Structure
index.jsx
|
App.jsx
|
Auth.jsx
|
Layout.jsx
<Routes />
index.jsx
import React from 'react';
import store from './store.js';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';
const history = createBrowserHistory();
import App from './containers/App.jsx';
ReactDOM.render(
<Provider store={store}>
<MuiThemeProvider muiTheme={muiTheme}>
<BrowserRouter>
<App />
</BrowserRouter>
</MuiThemeProvider>
</Provider>,
document.getElementById('root')
);
App.jsx
import React, { Component } from 'react';
import Auth from '../components/Auth.jsx';
class App extends Component {
render() {
return <Auth />;
}
}
Auth.jsx
import React from 'react';
import { Route } from 'react-router-dom';
import Layout from './Layout.jsx';
export default function Auth(props) {
//this Has a render function to render a Loader, Error Page, or the Layout
return <Layout />;
}
Layout.jsx
There's more complexity involved here with rendering out the entire application. I'm going to leave the other layout components commented out and just have some Links and a Switch component to get that working before making items more modular.
import React, { Component } from 'react';
import { Link, Switch, Route } from 'react-router-dom';
import Overview from './views/overview/Overview.jsx';
import Home from './views/home/Home.jsx';
export default class Layout extends Component {
render() {
return (
<div className="layout">
{/* <TopBar /> */}
{/* <AppBar/> */}
{/* <Drawer>
<MainMenu/>
</Drawer> */}
<Link to="/">HOME</Link>
<Link to="/overview">Overview</Link>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/overview" component={Overview} />
</Switch>
{/* <Routes /> */}
{/* <Footer /> */}
</div>
);
}
}
Routes.jsx
This is what I'm intending the routes components to look like.
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Home from './views/home/Home.jsx';
import Overview from './views/overview/Overview.jsx';
import Admin from './views/admin/Admin.jsx';
import NotFound from './NotFound.jsx';
export default function Routes(props) {
return (
<Switch>
<Route path="/" exact component={Home} />
<Route path="/overview" component={Overview} />
<Route path="/admin" component={Admin} />
<Route component={NotFound} />
</Switch>
);
}
Is there something I'm missing to get components to render clicking Link? I'm not getting any console errors or anything telling me there's an issue. So not sure if components are not wrapped correctly or what may be causing the issue.
Looks like what was happening is that with Redux integrations was blocking updates.
Need to:
import {withRouter} from 'react-router-dom';
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App))'
Documentation
You can also use pure: false in connect.
https://github.com/reactjs/react-redux/blob/master/docs/troubleshooting.md#my-views-arent-updating-when-something-changes-outside-of-redux
I've just started with Meteor and React and most everything I've seen for routers points me to react-router. I've pulled some code from the simple-todos branch and set up a "/" route but keep getting the error router.js:347 There is no route for the path: /. The page shows the content but I don't understand why this error is showing. I've tried Googling for answers and I can't find anything to help me solve this. I've also tried creating <Link /> elements to have links send me to other pages and that doesn't work either.
Here is my code:
Routes.jsx
import React from 'react';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
import { render } from 'react-dom';
import Home from '../../ui/layouts/Home.jsx';
import SignUpPage from '../../ui/pages/SignUpPage.jsx';
export const renderRoutes = () => (
<Router history={browserHistory}>
<Route path="/" component={Home} />
</Router>
);
Home.jsx
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { Meteor } from 'meteor/meteor';
import { RouteHandler } from 'react-router';
import NavBase from '../components/nav/NavBase.jsx';
import Splash from '../components/home/Splash.jsx';
import Snapshot from '../components/home/Snapshot.jsx';
import FooterCTA from '../components/home/FooterCTA.jsx';
import JoinModal from '../components/accounts/JoinModal.jsx';
import LogInModal from '../components/accounts/LogInModal.jsx';
import '../stylesheets/bootstrap.min.css';
import '../stylesheets/style.css';
export default class Home extends Component {
render() {
return (
<div>
<NavBase />
<Splash />
<Snapshot />
<FooterCTA />
<LogInModal />
{this.props.children}
</div>
)
}
}
Home.propTypes = {
currentUser: React.PropTypes.object,
children: React.PropTypes.element,
};
main.jsx
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import { renderRoutes } from '../imports/startup/client/routes.jsx';
Meteor.startup(() => {
render(renderRoutes(), document.getElementById('app'));
});
Any help with this would be greatly appreciated! Been stuck for a while now and would like to be able to move on.
It looks like you have declared Home as your App layout, then you would have your routes below like this:
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="/another" component={Another}/>
</Route>
</Router>