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>
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 tried using react router but it doesn't work. I already know that React Router Dom v6 has changed from Switch to Routes but when I run the program it just shows a blank screen. Does anyone know how to fix this? Here is my code:
App.js
'''
import React, {Component} from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { render } from "react-dom";
import HomePage from "./HomePage";
export default class App extends Component{
render() {
return (
<Router>
<div>
<HomePage />
</div>
</Router>
);
}
}
const appDiv = document.getElementById("app");
render(<App />,appDiv);
'''
HomePage.js
'''
import React,{Component} from 'react';
import RoomJoinPage from "./RoomJoinPage";
import CreateRoomPage from "./CreateRoomPage";
import { BrowserRouter as Router ,
Routes ,
Route ,
} from "react-router-dom"
export default class HomePage extends Component{
render () {
return (
<Router>
<Routes>
<Route path='/'>
<p>This is Home Page</p>
</Route>
<Route path='/join' element={<RoomJoinPage />} />
<Route path='/create' element={<CreateRoomPage />} />
</Routes>
</Router>
);
}
}
'''
The error is that "You cannot render a Router inside another Router " occurs when we have 2 Router components in the same React application.
So if u see u are calling in App.js and when u call Homepage from app.js it renders again. Thats why everything becomes blank.
and avoid using p tag inside render function in homepage.js
Try doing this:
**App.js**
import React, {Component} from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { render } from "react-dom";
import HomePage from "./HomePage";
export default class App extends Component{
render() {
return (
<div>
<HomePage />
</div>
);
}
}
const appDiv = document.getElementById("app");
render(<App />,appDiv);
**Homepage.js**
import React,{Component} from 'react';
import RoomJoinPage from "./RoomJoinPage";
import CreateRoomPage from "./CreateRoomPage";
import { BrowserRouter as Router ,
Routes ,
Route ,
} from "react-router-dom"
export default class HomePage extends Component{
render () {
return (
<Router>
<Routes>
<Route path='/'>
</Route>
<Route path='/join' element={<RoomJoinPage />} />
<Route path='/create' element={<CreateRoomPage />} />
</Routes>
</Router>
);
}
}
Can anyone tell me why my router is not working, I didn’t do anything to complicated with my app its one one page and I tried to add a router in app.js that has a link to my home page and every time i add router everything disappears from my app its just a white screen.
app.js
import "aos/dist/aos.css";
import { BrowserRouter as Router, Route, Routes} from "react-router-dom";
import Home from "./components/Home";
function App() {
return (
<div className="App">
<h1>Welcome to React Router!</h1>
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</div>
);
}
export default App;
Home.js
import React from 'react'
function Home() {
return (
<div>Home</div>
)
}
export default Home
index.js
import * as React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
Try using Switch instead of Routes and you also don't have to use triangular brackets in element
import Home from './components/Home';
import { Route, Switch } from 'react-router';
<Switch>
<Route path="/" element={Home} />
</Switch>
If you want all path begin with / go to your home page, you can change like this: <Route path="/*" element={} />
I'm trying to separate routes into their own file, but they seem to be always rendered, even if I've added exact to the path.
Home route - home.js:
import React from 'react';
import { BrowserRouter as Route } from 'react-router-dom';
import { HomePageView } from 'components'
const HomeRoute = () => (
<Route exact path='/home'>
<HomePageContainer />
</Route>
)
export default HomeRoute;
HomePageView.js:
import React from 'react';
class HomePageView extends React.Component {
render() {
return (
<div>Some text here</div>
)
}
}
export default HomePageView;
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import HomeRoute from 'routes/home'
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<Router>
<HomeRoute />
</Router>,
document.getElementById('root')
);
The problem is that it renders the HomePageView component on any path and I don't understand why this happens because it works as expected if I replace <HomeRoute /> from index.js with:
<Route exact path='/home'>
<HomePageContainer />
</Route>
I haven't tested this myself, but isn't the problem that you are importing BrowserRouter as Route in your home.js?
The file would looks like this when rendered:
<BrowserRouter>
<BrowserRouter>
<HomePageContainer/>
<BrowserRouter/>
<BrowserRouter/>
You need to import route from react-router-rom like this import { Route } from "react-router-dom";
"as" in import is an alias, not what is imported.
Fixed home.js file:
import React from 'react';
import { Route } from "react-router-dom";
import { HomePageView } from 'components'
const HomeRoute = () => (
<Route exact path='/home'>
<HomePageContainer />
</Route>
)
export default HomeRoute;
I'm doing very simple programme on react router..but I don't know what's going wrong with this...here is my react router code..
index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Router, browserHistory} from 'react-router';
import routes from './routes';
ReactDOM.render(
<Router history={browserHistory} routes={routes} />
, document.querySelector('.container'));
and here is the routes file ..
routes.js
import React, { Component } from 'react';
import { Route, IndexRouter } from 'react-router';
import App from './components/app';
export default(
<Route path="/" component={App} />
);
it shows error something like this...
You need to use react-router-dom instead of react-router. I've created basic code sandbox for the same You can check code here. https://codesandbox.io/embed/m779xxx4zy.
App.js
import React from "react";
const App = props => {
return <div>HI</div>;
};
export default App;
Routes.js
import React from "react";
import { Route, Switch } from "react-router-dom";
import App from "./app";
const Routes = props => {
return (
<div>
<Switch>
<Route exact path="/" component={App} />
</Switch>
</div>
);
};
export default Routes;
index.js
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import Routes from "./routes";
ReactDOM.render(
<BrowserRouter>
<Routes />
</BrowserRouter>,
document.querySelector(".container")
);