We Keep Coding

remove # from url react-router-dom in react js

I am new in react.js
I am using react-router-dom v6 and I working on a theme where I find an issue with # in URL
Example:- {url}/#/dashboard
I want
Example:- {url}/dashboard

I think you have to use BrowserRouter instead of HashRouter
1. You can add it in your index.js or index.tsx depending on your project.
import { BrowserRouter } from 'react-router-dom'
root.render(
<BrowserRouter>
<App/>
</BrowserRouter>)
2. You can also add in your App.js or App.tsx depending
import { BrowserRouter,Routes,Route } from 'react-router-dom'
const App = () => {
return (
<BrowserRouter className='main'>
<Routes>
<Route exact path='/' element={<Home />} />
</Routes>
<Routes>
</Routes>
</BrowserRouter>
);
}

am assuming, you are using HashRouter if yes then please use BrowserRouter instead HashRouter
implement BrowserRouter on routing
import { BrowserRouter,Route, Routes } from 'react-router-dom'
render(
<BrowserRouter>
<Routes>....</Routes>
</BrowserRouter>)

You have to use BrowserRouter instead of HashRouter from react-router-dom
In your App.js file, try like below.
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import LandingPage from './Containers/LandingPage';
const App = () => {
return (
<BrowserRouter className='App'>
<Routes>
<Route exact path='/' element={<LandingPage />} />
</Routes>
<Routes>
<Route ... ... />
</Routes>
... ...
</BrowserRouter>
);
}
export default App;

react route using browserhistory changes url but nothing happens

I'm trying to get a react router to work. This is my code:
var hashHistory = require('react-router-dom').hashHistory;
var BrowserRouter = require('react-router-dom').BrowserRouter;
var Route = require('react-router-dom').Route;
var ReactDOM = require('react-dom');
var React = require('react');
var Index = require('./index');
var Login = require('./login');
ReactDOM.render(
<BrowserRouter history={hashHistory}>
<div>
<Route path="/" component={Index} />
<Route path="/login" component={Login} />
</div>
</BrowserRouter>,
document.getElementById('main-content')
);
and then later in my index.js i do this:
<div className="navbar-nav" onClick={() => this.props.history.push('/login')}>
Log in
</div>
This makes the url change to /login but it doesn't render the login file. What is wrong?

It seems like when you switch to /login it matches to /:
<Route path="/" component={Index} />
Try to add exact prop to the route, like this:
<Route exact path="/" component={Index} />
What you can also try to do is to change the matching order:
<Route path="/login" component={Login} />
<Route path="/" component={Index} />

Is your index.js a separate file or component? If so you need to use the router middleware to connect it to react-router.
Either import the Link component and use it directly,
or bind a click handler and wrap withRouter to mount the router calls to the props.
import React from 'react';
import {Link, withRouter} from 'react-router';
class Test extends React.Component {
constructor(props) {
super(props);
this.handleLink = this.handleLink.bind(this);
}
handleLink() {
this.props.history.push('/login')
}
render() {
return (
<div>
<Link to={{pathname: '/login'}}>Link</Link>
<button onClick={this.handleLink}>Click</button>
</div>
);
}
}
export default withRouter(Test);

How to upgrade from react-router to react-router-dom?

If i want to upgrade from "react-router": "^2.0.0" to "react-router": "^4.0.0","react-router-dom": "^4.0.0".
My structure should be like this:
Main Component :is a container component for every thing (the
parent).
Nav Component :is used to navigate among my other child components and this component should appear always.
Child Components: Examples , About ,Test. where Test is the Default.
My old code which works as expected is like this :
-App.jsx
var {Route, Router, IndexRoute, hashHistory} = require('react-router');
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={Main}>
<Route path="about" component={About}/>
<Route path="examples" component={Examples}/>
<IndexRoute component={Test}/>
</Route>
</Router>,
document.getElementById('app')
);
-Main Component is like this :
var React = require('react');
var Nav = require('Nav');
var Main = (props) => {
return (
<div>
<Nav/>
{props.children}
</div>
);
}
module.exports = Main;
-My Nav Component is like this :
var React = require('react');
var {Link, IndexLink} = require('react-router');
var Nav = () => {
return (
<div>
<IndexLink to="/" activeClassName="active" activeStyle={{fontWeight: 'bold'}}>Test</IndexLink>
<Link to="/about" activeClassName="active" activeStyle={{fontWeight: 'bold'}}>About</Link>
<Link to="/examples" activeClassName="active" activeStyle={{fontWeight: 'bold'}}>Examples</Link>
</div>
);
};
module.exports = Nav;
I try to upgrade like this:
-App.jsx
var { BrowserRouter, Route } =require('react-router-dom');
ReactDOM.render(
<BrowserRouter>
<div>
<Route path='/' component={Main} />
<Route path='/Test' component={Test}/>
<Route path='/about' component={About}/>
<Route path='/examples' component={Examples}/>
</div>
</BrowserRouter>,
document.getElementById('app')
);
-My Main Component has no changes
-My Nav Component is like this :
var React = require('react');
var {Link, NavLink} =require('react-router-dom');
var Nav = ()=>{
return(
<div>
<NavLink activeClassName="active" activeStyle={{fontWeight: 'Bold'}} to="/Test">Test</NavLink>
<NavLink activeClassName="active" activeStyle={{fontWeight: 'Bold'}} to="/about">About</NavLink>
<NavLink activeClassName="active" activeStyle={{fontWeight: 'Bold'}} to="/examples">Examples</NavLink>
</div>
);
}
module.exports = Nav;
I face the following problems :
The Test Component isn't the default like before.
The Main Component doesn't behave like a parent.
When i refresh the browser on Examples, i get the following error :
http://localhost:5000/examples net::ERR_CONNECTION_REFUSED

So you need to change your App.jsx module, so it's rendering only Main component, because now you can move your router in there. React Router v4 is no more rendering it's routes to props children. Now you need to declare it at specific place you want it to be rendered.
App.jsx
ReactDOM.render(
<Main/>,
document.getElementById('app')
);
Main component
var React = require('react');
var Nav = require('Nav');
var { HashRouter, Route, Switch } = require('react-router-dom');
var Main = (props) => {
return (
<HashRouter>
<Nav/>
<Switch>
<Route path='/about' component={About}/>
<Route path='/examples' component={Examples}/>
<Route component={Test}/>
</Switch>
</HashRouter>
);
}
module.exports = Main;
So now your Main component can behave like parent.
If you remove path attribute for Route component, it will behave like default. Also you might noticed I've added Switch component. It should assure one route is rendered exclusively. You can check detailed info in manual.
Before, you had used hashHistory for your Router, now you can do the same using HashRouter. This should resolve error you get.

react router did not work, error decoder?

What's wrong with below code? I just want to navigate to page B from page A where page A has a link. I don't want to use any layout aka container. I got this error after follow the error link the console :
_registerComponent(...): Target container is not a DOM element.
My code:
var { Router, Route, IndexRoute, Link, browserHistory } = ReactRouter
const UserProfile = React.createClass({
render(){
return(
<div>
<p>James</p>
<p>age:20</p>
</div>
)
}
})
const App = React.createClass({
render() {
return(
<div>
<h1>Home page</h1>
<div><Link to="/profile/1">Go</Link></div>
</div>
)
}
});
ReactDOM.render(
<Router>
<Route path="/" component={App}/>
<Route path="/profile/:id" component={UserProfile}/>
</Router>,
document.getElementById('App')
);
http://codepen.io/anon/pen/YpgGgL?editors=0010

As #Ruben Karapetyan already wrote in his comment, you have a typo in document.getElementById('App'). Instead of App you have app written in your HTML code. Therefore, you have to write document.getElementById('app').

React Router only recognises index route

I have 2 routes, / and /about and i've tested with several more. All routes only render the home component which is /.
When I try a route that doesn't exist it recognises that fine and displays the warning
Warning: No route matches path "/example". Make sure you have <Route path="/example"> somewhere in your routes
App.js
import React from 'react';
import Router from 'react-router';
import { DefaultRoute, Link, Route, RouteHandler } from 'react-router';
import {Home, About} from './components/Main';
let routes = (
<Route name="home" path="/" handler={Home} >
<Route name="about" handler={About} />
</Route>
);
Router.run(routes, function (Handler) {
React.render(<Handler/>, document.body);
});
./components/Main
import React from 'react';
var Home = React.createClass({
render() {
return <div> this is the main component </div>
}
});
var About = React.createClass({
render(){
return <div>This is the about</div>
}
});
export default {
Home,About
};
I've tried adding an explicit path to about to no avail.
<Route name="about" path="/about" handler={About} />
I've stumbled upon this stackoverflow Q but found no salvation in its answer.
Can anyone shed some light on what might be the problem?

Using ES6 and the newest react-router would look like this:
import React from 'react';
import {
Router,
Route,
IndexRoute,
}
from 'react-router';
const routes = (
<Router>
<Route component={Home} path="/">
<IndexRoute component={About}/>
</Route>
</Router>
);
const Home = React.createClass({
render() {
return (
<div> this is the main component
{this.props.children}
</div>
);
}
});
//Remember to have your about component either imported or
//defined somewhere
React.render(routes, document.body);
On a side note, if you want to match unfound route to a specific view, use this:
<Route component={NotFound} path="*"></Route>
Notice the path is set to *
Also write your own NotFound component.
Mine looks like this:
const NotFound = React.createClass({
render(){
let _location = window.location.href;
return(
<div className="notfound-card">
<div className="content">
<a className="header">404 Invalid URL</a >
</div>
<hr></hr>
<div className="description">
<p>
You have reached:
</p>
<p className="location">
{_location}
</p>
</div>
</div>
);
}
});

Since you've nested About under Home you need to render a <RouteHandler /> component within your Home component in order for React Router to be able to display your route components.
import {RouteHandler} from 'react-router';
var Home = React.createClass({
render() {
return (<div> this is the main component
<RouteHandler />
</div>);
}
});