react router v4 default page(not found page)

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>
);
}
}

enter image description here enter image description here

its since path="*" represent all request and notfound component always there but how can I say hide this component for valid url path?

99600 次浏览
小开
最佳答案

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.

小开

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

小开

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>
)
}
小开

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.

小开

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>
);
}
小开

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>

Live Demo: Redirect Default or 404 Routes with React Router


提交答案