import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import Reducer from './Reducer/';
import {HashRouter as Router, Route, Redirect} from 'react-router-dom';
import Login from './Components/login.jsx';
import User from './Components/User.jsx';
const store = createStore(Reducer, applyMiddleware(thunk));
ReactDOM.render(
<Provider store={store}>
<Router>
<div>
<Route path='/login' component={Login}/>
<Route path='/user' component={User}/>
</div>
</Router>
</Provider>
,document.getElementById('root'));
When the user hits the '/' url i want them to be in the login component, but if i do:
<Route path='/' component={Login}/>
The login component always shows up on every different route.
My question is. On the landing page "/" how can i make it so it is the login component, but i dont want it to be there if i go to the user component
You could do <Route path='/' component={Login} exact /> to specify only rendering that component when its exactly / and nothing more.
You should use exact in your route:
<Route path="/" component={Login} exact />
In addition, you should consider using Switch component to wrap your routes. This will render exactly one route. By design, React Router renders all routes that match. Read about Switch here: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Switch.md
Related
This is my App component that has 3 child components: Home, Contact and Procedures. I'm trying to make each child component into its own url route.
However right now I'm just seeing a blank page
FYI- I'm using react-router-dom#6.0.2
import {BrowserRouter, Routes, Route} from 'react-router-dom';
import Home from './Home.js'
import Contact from './Contact.js'
import Procedures from './Procedures.js'
import './App.css';
function App() {
return (
<BrowserRouter>
<Routes>
<Route exact path="/" component={Home} />
<Route path="/procedures" component={Procedures} />
<Route path="/contact" component={Contact} />
</Routes>
</BrowserRouter>
);
}
export default App;
In react-router-dom version 6 you should use element instead of component, also be sure to reference the element you want to render as JSX. By the way, there is no longer any "exact" attribute.
Should look like this on your code:
<Route path="/" element={<Home />} />
I am unable to go to another page because this.props.history appears undefined. Below is a screenshot of the error that I see. Note that I rendered my welcome component using this.props.history.push("/welcome") from the login component and it worked fine then.
This is my App.js
import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Login from "./Components/Login";
import "./App.css";
import Signup from "./Components/Signup";
import Welcome from "./Components/Welcome";
import RecruiterPage from "./Components/Common/RecriterPage";
function App() {
return (
<Router>
<div className="App">
<Route exact path="/signup" component={Signup} />
<Route exact path="/" component={Login} />
<Route exact path="/welcome" component={Welcome} />
<Route exact path="/recruiter" component={RecruiterPage} />
</div>
</Router>
);
}
export default App;
My best guess is that the component you are trying to navigate from is a child component of a parent component that may or may not have access to history, hence has no access to the history props.
There are two ways to solving this:
1. Pass history as a props from the parent to the child component OR
2. Do this on the said component:
import { withRouter } from 'react-router-dom'
...and when exporting the component, wrap it in withRouter e.g.
export default withRouter(ComponentName)
I am learning React Routing and I am watching this tutorial:
https://www.youtube.com/watch?v=1iAG6h9ff5s
Its 2016 tutorial so I suppose something changed because 'react-router' not working anymore and I am supposed to use 'react-router-dom'.
I found that I must uninstall 'history' and 'react-router' and use 'react-router-dom' instead, but It not working as expected when I change it.
How to edit this to make it working with 'react-router-dom'?
import React from "react";
import ReactDOM from "react-dom";
import {Router, Route, IndexRoute, hashHistory} from "react-router";
import Layout from "./pages/Layout";
import Archives from "./pages/Archives";
import Featured from "./pages/Featured";
import Settings from "./pages/Settings";
const app = document.getElementById('app');
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={Layout}>
<IndexRoute component={Featured}></IndexRoute>
<Route path="archives" component={Archives}></Route>
<Route path="settings" component={Settings}></Route>
</Route>
</Router>,
app);
My edit:
import React from "react";
import ReactDOM from "react-dom";
import {BrowserRouter as Router, Route, Link, Switch} from "react-router-dom";
import Layout from "./pages/Layout";
import Archives from "./pages/Archives";
import Featured from "./pages/Featured";
import Settings from "./pages/Settings";
const app = document.getElementById('app');
ReactDOM.render(
<Router>
<Route path="/" component={Layout}>
<Route path="/featured" component={Featured}/>
<Route path="/archives" component={Archives}/>
<Route path="/settings" component={Settings}/>
</Route>
</Router>,
app);
Also pushState not working...
Layout.js
import React from "react";
import {Link} from "react-router-dom";
export default class Layout extends React.Component {
navigate() {
this.props.history.pushState(null, "/");
}
render() {
return (
<div>
{this.props.children}
<h1>Welcome</h1>
<button onClick={this.navigate.bind(this)}>Featured</button>
</div>
);
}
}
When I click to Link url change, but content is not loaded... Also when I access url I get "Cannot GET" error
After watching the video, you probably want something like this. At first this would not be so easy to understand but after seeing a few of them you digest it. First you render your Layout with one Route. Then in this top route, you use other Routes to setup your components.
We usually use exact props for a top root like /. If you don't setup your app like that, for example all your routes is in your top Router config, then to use a route something like /featured we must have exact prop. If we don't use it Router always hit / path and we always see the top level component.
But, in your situation, you want other components to be routed in your top level component. So, we drop exact prop here.
Also you can use push to change history.
Update
After think about the navigation button named "Featured", I think you want the Featured component rendered as default one here. When hit the button again you will come back to Featured one. I've changed the code according to that. In this version, we add a / route in the Layout and point it to Featured. So, when we come here it is rendered. But, we use exact prop here since we also want routes like "/featured", "/archives" and "/settings".
export default class Layout extends React.Component {
navigate = () => this.props.history.push("/");
render() {
return (
<div>
<h1>Welcome</h1>
<Link to="/featured">Featured</Link>
<Link to="/archives">Archives</Link>
<Link to="/settings">Settings</Link>
<br />
<button onClick={this.navigate}>Featured</button>
<Route exact path="/" component={Featured} />
<Route path="/featured" component={Featured} />
<Route path="/archives" component={Archives} />
<Route path="/settings" component={Settings} />
<div>
Some other info.
</div>
</div>
);
}
}
const app = document.getElementById('root');
ReactDOM.render(
<Router>
<Switch>
<Route path="/" component={Layout} />
</Switch>
</Router>,
app);
I'm new to react and now learning react-router.
I am trying to have multiple routes within the BrowserRouter and I am not sure why it isn't working.
My code is this
import React, { Component } from 'react';
import {database} from '../firebase';
import _ from 'lodash';
import ReactDOM from 'react-dom';
import {BrowserRouter, Route, Switch, Link} from 'react-router-dom';
import List from './List';
import NewPost from './NewPost';
class App extends Component {
render() {
return (
<div className="App container">
<header className="App-header">
<h1 className="App-title">Here We Go Again</h1>
</header>
<hr/>
<BrowserRouter>
<Switch>
<Route path='/' component={List}/>
<Route path='/new' component={NewPost}/>
</Switch>
</BrowserRouter>
</div>
);
}
}
export default App;
Regardless of the path I go to, it only shows the first one in the list. I have tried moving them around so I know that for sure. And the functionality of them all still work. It's just a matter of rendering them one at a time.
<BrowserRouter>
<Switch>
<Route path='/' component={List}/>
<Route path='/new' component={NewPost}/>
</Switch>
</BrowserRouter>
As you can see I tried some other possible solutions on stack overflow liek adding Switch but it still didn't work.
Any idea how to fix it or what I'm doing wrong?
You need to add the word exact to the first route. It is currently matching anything with a /.
<BrowserRouter>
<Switch>
<Route path='/' exact component={List}/>
<Route path='/new' component={NewPost}/>
</Switch>
</BrowserRouter>
I have created some components. For the routing, I am using react-router-dom. My set up is as follows.
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Dashboard from './components/Dashboard.jsx';
import Login from './components/Login.jsx';
import Signup from './components/Signup.jsx';
import Application from './components/Application.jsx';
import "./assets/main.css"
ReactDOM.render(
<Router>
<Application>
<Switch>
<Route exact path="/" component={Dashboard} />
<Route path="login" component={Login} />
<Route path="/signup" component={Signup} />
</Switch>
</Application>
</Router>, document.getElementById('container')
);
Here the my only '/' route is working, For /login and /signup I got Cannot GET /signup.
Please help me to come out from this. Thanks in anticipation
You should use history={browserHistory} in <Router>. Your code should look like:
<Router history={browserHistory}>
Updated
You should add following in your webpack.config.js;
devServer: {
historyApiFallback: true
}