Develop Reference

Can't get react-router-dom to work (seeing blank page)

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 />} />

React routing not working v4

I'm trying to route multiple pages using BrowserRouter. Many of the guides online are outdated and do not work with Reactv4. Here's what I'm doing:
Index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Route, Switch} from 'react-router-dom'
import SignIn from './components/SignIn';
import SignUp from './components/SignUp';
import ForgotPass from './components/ForgotPass';
ReactDOM.render((<BrowserRouter>
<Switch>
<Route path="/" component={SignIn}/>
<Route path="/signup" component={SignUp}/>
<Route path="/forgot" component={ForgotPass}/>
</Switch>
</BrowserRouter>), document.getElementById('root'));
And then I create hyperlinks to those pages using:
Forgot password?
But when I click the hyperlink it just loads the same page again.
Also: I've seen some guides use the App component, I wasn't sure if that is something predefined in React and if it was needed, as I need the SignIn component to be the default page.

Put the exact flat on your root path. Otherwise it will match in the switch before it gets to the lower routes.
<Switch>
<Route exact path="/" component={SignIn}/>
<Route path="/signup" component={SignUp}/>
<Route path="/forgot" component={ForgotPass}/>
</Switch>
OR move it to the end:
<Switch>
<Route path="/signup" component={SignUp}/>
<Route path="/forgot" component={ForgotPass}/>
<Route path="/" component={SignIn}/>
</Switch>

How to redirect using react-router-dom

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

How to define child routes as react components in react-router?

I have main.js:
import { render } from 'react-dom';
import { browserHistory, Router, Route, IndexRoute } from 'react-router';
import Home from './containers/Home';
import ApplicationsRoutes from './applications/routes';
render((
<Router history={browserHistory}>
<Route path="/" component="div">
<IndexRoute component={Home} />
<ApplicationsRoutes />
</Route>
</Router>
), document.getElementById('app'));
And /application/routes.js :
import { browserHistory, Router, Route, IndexRoute } from 'react-router'
import ApplicationsHome from './containers/ApplicationsHome';
export default () => (
<Route path="applications" component={ApplicationsHome} />
);
I was expecting that route from /application/routes.js will be added to the main router and so ApplicationsHome will be rendered for path /applications
Unfortunately, this is not a case. I am getting error:
Location "/applications" did not match any routes
For me it looks like such a way to compose Router does not work, but I cannot understand what is right way to do this.

In general, when you do this, you should consider using the PlainRoute syntax instead of the JSX syntax, then use getChildRoutes on the parent routes to resolve the child routes, per the huge-apps example: https://github.com/rackt/react-router/tree/master/examples/huge-apps
This will then let you easily configure code-splitting and dynamic routes down the road.

For singular routes you can export your route as a JSX element:
export default <Route path="applications" component={ApplicationsHome} />;
And include it like this:
{SomeRoute}
For multiple routes you can't export them as you have in a function, you'll get a JSX error saying you can't have adjacent components without a wrapping element. In that case you would have to do:
export default (
<Route>
<Route path="/about" component={About} />
<Route path="/services" component={Services} />
</Route>
);
And use it:
{ApplicationsRoutes}

React Router : Cannot read property 'toUpperCase' of undefined

I'm looking for an answer to an error I get every time I try to make the React Router work.
This is a GitHub link with the error : https://github.com/delmotte/error-react-router
Just run npm install and grunt to see the error.
This is in src/js/index.js
import React from 'react';
import { Router, Route } from 'react-router';
import TodoListContainer from './components/TodoListContainer.jsx';
import About from './components/About.jsx';
import App from './components/App.jsx';
React.render((
<Router>
<Route path="/" component={App}>
<Route path="about" component={About} />
<Route path="todolist" component={TodoListContainer} />
</Route>
</Router>
), document.getElementById('main'));
Help me please?
Thanks