react router v4 default page(not found page)
ReactjsReact RouterReactjs Problem Overview
This is common purpose, directing unmatch request to notfound page.
making this with react-router v4 looks like previous versions and I expect this sample works below. Links work fine but I expect NotFound component called only unknown url requested; but its always there.
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom'
class Layout extends Component {
render() {
return (
<Router>
<div className="App">
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/user">User</Link></li>
</ul>
<Route exact path="/" component={Home}/>
<Route path="/user" component={User}/>
<Route path="*" component={Notfound}/>
</div>
</Router>
);
}
}
its since path="*"
represent all request and notfound component always there but how can I say hide this component for valid url path?
Reactjs Solutions
Solution 1 - Reactjs
React Router's No Match documentation covers this. You need to import the <Switch>
component, then you can remove the path
attribute altogether.
> A <Switch>
renders the first child <Route>
that matches. A <Route>
with no path always matches
This is the example that uses:
<Router>
<div>
<Switch>
<Route path="/" exact component={Home}/>
<Redirect from="/old-match" to="/will-match"/>
<Route path="/will-match" component={WillMatch}/>
<Route component={NoMatch}/>
</Switch>
</div>
</Router>
So in your case, you'd simply drop the path="*"
and introduce the <Switch>
:
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/user" component={User}/>
<Route component={Notfound} />
</Switch>
Remember to include Switch
to your import
statement at the top.
Solution 2 - Reactjs
this is my solution with two components.
const NotFound = () => <div>Not found</div>
const NotFoundRedirect = () => <Redirect to='/not-found' />
//root component
<Switch>
<Route path='/users' component={UsersPages} />
<Route path='/not-found' component={NotFound} />
<Route component={NotFoundRedirect} />
</Switch>
//UsersPages component
<Switch>
<Route path='/home' component={HomePage} />
<Route path='/profile' component={ProfilePage} />
<Route component={NotFoundRedirect} />
</Switch>
That work perfect for me. Thanks.
Solution 3 - Reactjs
This method works perfectly, it allows to make a redirect if the url does not exist or if it is false
function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/sorties-scolaires" component={SortiesScolaires} />
<Route path="/voyages-entreprise" component={VoyagesEntreprise} />
<Route path="*">
<Redirect to="/" />
</Route>
</Switch>
</Router>
);
}
Solution 4 - Reactjs
Although the accept solution does provide the answer, but it wouldn't work when you have nested Routes
For instance, if the Home
component has nested Routes like /home
, /dashboard
and if the visited url is /db
, it would show a NotFound
component only within the Route section, but not the page as a whole.
To avoid this, you can go along with a very simple tweak of using a component and a Provider
const NoMatch = (props) => (
<Redirect to={{state: {noMatch: true}}} />
)
const ProviderHOC = (NotFoundRoute) => {
const RouteProvider = (props) => {
if(props.location && props.location.state && props.location.noMatch) {
return <NotFoundRoute {...props} />
}
return props.children;
}
return withRouter(RouteProvider)
}
export default ProviderHOC;
And then you can use it like
const RouteManager = ProviderHOC(NotFoundComponent);
<Router>
<RouteManager>
<Switch>
<Route path="/" exact component={Home}/>
<Redirect from="/old-match" to="/will-match"/>
<Route path="/will-match" component={WillMatch}/>
<NoMatch />
</Switch>
</RouteManager>
</Router>
and within Home component
render() {
return (
<Switch>
<Route path="/home" component={NewHome} />
<Route path="/dashboard" component={Dashboard} />
<NoMatch />
</Switch>
)
}
Solution 5 - Reactjs
React Router v6
I know it was a question for Router v4, but since there is v6 out, to redirect and navigate to one of our chosen routes, we can use <Navigate>
component from React Router.
Example:
<Router>
<Routes>
<Route path="users" element={<Users />} />
<Route path="posts" element={<Posts />} />
</Routes>
</Router>
Now we can declare below our route configuration the case for empty routes, like this:
<Router>
<Routes>
<Route path="users" element={<Users />} />
<Route path="posts" element={<Posts />} />
<Route path="" element={<Navigate to="/users" />} />
</Routes>
</Router>
Solution 6 - Reactjs
It does not work for me, particularly one is using this config
So, I have to check the path in the render function of Homepage component. Something like this:
render(){
const {match, location, history} = this.props;
if (location.pathname === '/'){
return (<div>Home</div>)
}else{
return null
}
}