i have a little React app project and i have deployed it in Github. It works, even i am using import { BrowserRouter, Link, Switch, Route } from "react-router-dom"; to routing and works ... for my home component but not for the rest. This is my code: `class App extends React.Component {
render() {
return <div>
<BrowserRouter basename={process.env.PUBLIC_URL}>
<Switch>
<Route exact path ="/" component={Show} />
<Route exact path="/contact" component={Contact}/>
</Switch>
</BrowserRouter>
</div>
}
}
export default App;`
I have used this in local machine without the "basename" and worked. Now, in the github server my problem is that it is currently showing my first component when you visit my app main url but is not working for the other component, "/contact". I am not sure if i have to use the '<Link to ' property. Anyway, i just want to know why is working for my main url path (https://namegithub.github.io/main-path/) but not for any other path (https://namegithub.github.io/main-path/contact).
Sorry is a dummy question but actually i am just giving my first steps in React.
Thanks!
you can you this code
import {BrowserRouter as Router,Switch,Route} from 'react-router-dom'
return <div>
<Router basename={process.env.PUBLIC_URL}>
<Switch>
<Route exact path ="/" component={Show} />
<Route exact path="/contact" component={Contact}/>
</Switch>
</Router>
</div>
Related
I am confused. Still learning Reactjs though and I am having this issue. I uploaded my react app to github pages. The only thing not working is the homepage on load. I mean, when I visit the site link, it doesn't display the homepage except I click the homepage link on the navigation bar.
However, while on my local machine, the home page works fine onload. No issues at all. I am still a novice and will appreciate any help rendered. Here is my code.
import Single from './pages/single/single'
import Home from './pages/home/home'
import TopBar from "./components/topbar/TopBar";
import Write from './pages/write/write'
import Settings from './pages/settings/settings'
import Login from './pages/login/login'
import Register from './pages/register/register'
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
function App() {
const user = false;
return (
<Router>
<TopBar/>
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/register">
{ user? <Home/> : <Register />}
</Route>
<Route path="/login">
{user? <Home/> : <Login />}
</Route>
<Route path="/write">
{user? <Write /> : <Register/>}
</Route>
<Route path="/settings">
{user? <Settings />: <Register/>}
</Route>
<Route path="/post/:postId">
<Single />
</Route>
</Switch>
</Router>
);
}
export default App;
Is there anything that I am doing wrong here?
You can try to update your import HashRouter instead of BrowserRouter
import { HashRouter } from "react-router-dom";
Alternatively, you can use a trick to teach GitHub Pages to handle 404 by redirecting to your index.html page with a special redirect parameter. You would need to add a 404.html file with the redirection code to the build folder before deploying your project, and you’ll need to add code handling the redirect parameter to index.html. You can find a detailed explanation of this technique in Here is the proper documentiotion to deploy SPA using at github pages Link
I'm building a new chrome extension using ReactJS, and I'm trying to redirect on '/' (default) to an existing route using the component of react-router.
For some reason, I can see it when I compile it to localhost, but when I upload it as a chrome extension I can't see it anymore.
What I thought about is that maybe there is another route that is in use as the main route in chrome extension instead of '/'.
I tried to console.log it but for some reason, it is not showing me the logs.
Thanks!
<div className="App">
<BrowserRouter>
<Navbar />
<Route
path="/"
exact
render={() => <Redirect to="/navigatehere" /> }
/>
<Route
path="/navigatehere"
exact
render={() => <NavigateHere />}
/>
</BrowserRouter>
</div>
);
}
export default App;
First Of all you need Switch to use exact prop.
You can import it like this.
import {BrowserRouter, Switch, Route}
// Then you have to use
<BrowserRouter>
<div>
<Switch>
<Route path='/' exact /*render Whatever you want after this . . .*/ />
</Switch>
</div>
</BrowserRouter>
Second of all, I use component prop instead of render().
Like this -
import DummyComponent from './DummyFolder/DummyComponent;
import React from 'react'
import {BrowserRouter as Router, Switch, Route}
<BrowserRouter>
<div>
<Switch>
<Route path='/' exact component={DummyComponent}/> // This will render the component in the respective path
</Switch>
</div>
</BrowserRouter>
However render() should also work for you if you use <Switch>. It is working without Switch for rest of the router because you are not specfing path as '/' for all the <Route />. If you want to route to '/', then Switch is compulsory. You can also refer DevEd 's YouTube channel for more understanding. He has made an exclusive video on React Router. Check that out Here ◀ ◀ ◀.
I am using router version 5.2 and I am trying to make routes in file app.js.
My routes look like this:
import React from 'react';
import { render } from 'react-dom'; // if you use just render()
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
ReactDOM.render(
<Router>
<div>
<Switch>
{/* Using the `component` prop */}
<Route exact path="/" component={Homepage} />
<Route path="/display-item" component={DisplayProduct} />
<Route path="/category/:id" component={DisplayCategory} />
<Route path="/product/:id" component={OneProduct} />
<Route path="/checkout" component={CheckOut} />
<Route path="/orderPlaced" component={OrderPlaced} />
</Switch>
</div>
</Router>,
document.getElementById('crud-app'),
);
Problem is that only route / is working. So only home page is displayed.
When I try to go to http://localhost:8000/#/display-item nothing happens. So I am still on homepage and I don't have any warnings or errors in console.
If I go to http://localhost:8000/display-item then I get error GET http://localhost:8000/display-item 404 (Not Found)
Please anyone had similar problem? How to solve this?
Thank you!
UPDATE:
The problem was with backend Laravel, beside routes in react, you should define routes in web.php file
Route::view('/', 'welcome');
Route::view('/display-item', 'welcome');
Place the home route as the last statement in switch then it will work. in your code every path matches with '/' so every time it will go to the home route.If you place it at the last then it will search for exact path.
I'm trying to build a React App, this is the first time i'm working with react and so i don't know how to troubleshoot this. Basically what i need is to create routes for a link, let's say these are the following links.
/car
/car/sedan
/car/coupe
i have setup routing as so.
car.js
import React from 'react'
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'
import CoupeCar from './coupecar'
import SedanCar from './sedancar'
class Car extends React.Component {
constructor(props){
super(props);
}
render () {
return (
<div className="main_elem_container">
<Router>
<Switch>
<Route path="/car" component={Car} />
<Route exact path="/car/sedan" component={SedanCar} />
<Route exact path="/car/coupe" component={CoupeCar} />
</Switch>
</Router>
</div>
);
}
}
const Car = () => (
<p>I'm a Car</p>
)
export default Car;
And the routing works i can visit /car/sedan and /car/coupe when i'm browsing through the navigation from /car but i cannot visit /car/sedan when im at the /car/coupe page and vice-versa.
The navigation just gets stuck and doesn't load, please let me know on how i can fix this i've even tried many options but all of them give me this result, at least if i knew how to debug this it'll be better, thanks.
I don't know how your setup works partially, it should not with this config. What you need is:
<Router>
<Switch>
<Route exact path="/car" component={Car} />
<Route path="/car/sedan" component={SedanCar} />
<Route path="/car/coupe" component={CoupeCar} />
</Switch>
</Router>
So, if only when you hit /car your Car component renders. For /car/sedan and /car/coupe you will see the related components. If you don't use exact for /car, /car/sedan and /car/coupe will render Car component no matter what.
Also, do not use same component names. You have two Car components. Rename the container something else, App maybe?
try this, the exact path should be placed as last option
<Router>
<Switch>
<Route path="/car/sedan" component={SedanCar} />
<Route path="/car/coupe" component={CoupeCar} />
<Route exact path="/car" component={Car} />
</Switch>
</Router>
I'm new to React and React Router. I'm using React Router v4 and following a tutorial based on previous versions - but I made it work (using some stuff found on SO and some stuff on the react router v4 docs).
There is one thing though that is bothering me.
I have a url http://localhost:3000/#/bugs, which basically loads a list of all my bugs. But I also have possible urls like http://localhost:3000/#/bugs?priority=low&status=open which loads a specific set of urls.
The urls themselves work and do the job as expected.
The werid thing is that whenever I type http://localhost:3000/#/bugs?priority=low&status=open (or any params), the component do their jobs but the URL address bar shows http://localhost:3000/#/bugs (although the rendering shows everything related to priority and status shown).
Somehow, the URL location bar is changed but I don't understand why.
Here is my App.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BugList} from './BugList';
import {Redirect} from 'react-router';
import {HashRouter as Router, Route} from 'react-router-dom';
const NoMatch = React.createClass({
render : function (){
return(
<h2>This path does not exist</h2>
);
}
});
ReactDOM.render(
(
<Router>
<div>
<Route path='/bugs' component={BugList}/>
<Route path='/bugs/priority/:priority' component={BugList}/>
<Redirect from='/' to="/bugs" />
<Route path="*" component={NoMatch} />
</div>
</Router>
),
document.getElementById('main')
);
Thanks in advance.
EDIT 12th of April. Despite of the precious help of someone below, this is still not solved. I tried using Switch inside a Router but it doesn't work at all (nothing is shown). So the problem is still happening, and this is the current state of my App.js, using react-15.5.3, react-dom-15.5.3, react-router-4.0.0 and react-router-dom-4.0.0....
import React from 'react';
import ReactDOM from 'react-dom';
import {BugList} from './BugList';
import BugEdit from './BugEdit';
import {Redirect} from 'react-router';
import {HashRouter as Router, Route} from 'react-router-dom';
const NoMatch = React.createClass({
render : function (){
return(
<h2>This path does not exist</h2>
);
}
});
ReactDOM.render(
(
<Router>
<div>
<Redirect from='/' to="/bugs" />
<Route path='/bugs' component={BugList}/>
<Route path='/bug/:id' component={BugEdit}/>
<Route path="*" component={NoMatch} />
</div>
</Router>
),
document.getElementById('main')
);
The problem is that even if you enter the URL with query this URL matches Redirect path (since it's just / any URL matches this pattern) so the redirection to /bugs occurs. You have to use Switch (remember to import it) to render only the first <Route> or <Redirect> that matches the URL:
<Router>
<Switch>
<Route path='/bugs' component={BugList}/>
<Redirect from='/' to="/bugs" />
...
</Switch>
</Router>
The problem occured only on page load and not on re-entering the URL because your routing is based on hashes and the browser doesn't reload page when only hash part changes.
Please note that Redirect component in React-Router v4 performs redirection only when it's rendered - it doesn't set up permanent redirection rule so in your case redirection works only on page load. If you'd like your app to always redirect given URL you'd have to define Route for URL you'd like to redirect from and render Redirect:
<Route path='/oldUrl' render={() => (
<Redirect to="newUrl" />
)}/>
Furthermore, React-Router v4 is quite different from v3 so I don't recommend using v3 tutorials - it doesn't make sense.
Building on what Bartek said: if you use Switch, it will go directional from top to bottom and render the first hit, since you moved your redirect to the first position it will always hit that first and then not go to the other routes. Which is why your Switch should look like this imho (untested):
<Router>
<Switch>
<Route path='/bugs' component={BugList}/>
<Route path='/bug/:id' component={BugEdit}/>
<Redirect from='/' to="/bugs" />
<Route path="*" component={NoMatch} />
</Switch>
</Router>
I know its 04/2020, but this will fix your issue.
<Switch>
<Route path='/bug/:id' component={BugEdit}/>
<Route path='/bugs' component={BugList}/>
<Redirect from='/' to="/bugs" />
<Route path="*" component={NoMatch} />
</Switch>
</Router>```