CODEWITHSUNDEEP
reactjs
mohammad amini nasab
mohammad amini nasab

Reputation: 76

react js, when open page Other than home in new tab show 404

I load url http://reactnext.mohan21.ir and show my project but when I open http://reactnext.mohan21.ir/about in new tab it shows a 404 error. How do I solve this error?

Upvotes: 1

Views: 936

Answers (2)

mohammad amini nasab
mohammad amini nasab

Reputation: 76

i used htaccess and run without 404

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]

Upvotes: 1

Akam
Akam

Reputation: 141

you can use react-router-dom to switch components based on URL

so for example, if you have 2 pages, home and about, then you put everything related to home page in a component names Home or anything you would prefer, and another component for about page, then in your App component, you can use something like this:

import {Switch, Route} from "react-router-dom"
import HomePage from "path/to/homepage"
import AboutPage from ""path/to/aboutpage""

export default function App(){
  return (<Router>
    <Switch>
      <Route exact path="/about" component={AboutPage} />
      <Route path="/" component={HomePage} />
    </Switch>
  </Router />
)
}
  • Router is setting up the environment to help you take advantage of routing.
  • Switch is decide which route to render based on the Route's in its children.
  • Route defines properties to help Switch choose a component to render based on the URL of the browser.

You can learn more about react router here https://reactrouter.com/web/api/Route

Upvotes: 1

Related Questions