React Router does not recognize direct address line changing in laravel - javascript

I use React Router and Laravel. When I navigate throught Link elements all OK, but when I change browser address line to manually show another component Laravel shows it defalt 404 page.
This is default web.php content, in welcome.blade.php I inlcude js/app.js file:
Route::get('/', function () {
return view('welcome');
});
This is my App.js content:
import React from 'react';
import { Switch, Route } from "react-router-dom";
import Signin from "../../containers/Signin";
import Signup from "../../containers/Signup";
import Error from "../../containers/Error";
import Courses from "../../containers/Courses";
import Course from "../../containers/Course";
import Quiz from "../../containers/Quiz";
import Header from "../Header";
import "./App.css";
import Library from "../../containers/Library";
import QuizResults from "../../containers/QuizResults";
import Main from "../Main";
import StudentsList from "../../containers/StudentsList";
function App()
{
return (
<div className="App">
<Header isLogged={false}/>
<Switch>
<Route exact path='/' component={Signin} />
<Route path='/signup' component={Signup} />
<Main>
<Route path='/courses' component={Courses} />
<Route path='/course/:id' component={Course} exact/>
<Route path='/quiz' component={Quiz} />
<Route path='/library' component={Library} />
<Route path='/quiz-results' component={QuizResults} />
<Route path='/students' component={StudentsList} />
</Main>
<Route component={Error} />
</Switch>
</div>
);
}
export default App;
app.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './components/App';
import './index.css';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
So, how to force React Router react on direct browser address line change?

as your working with SPA so you need to configure your web.php like this
Route::any('{all}', function () {
return view('welcome');
})
->where('all', '^(?!api).*$')
->where('all', '^(?!storage).*$');
then react router will catch all routes
and here api and storage routes is exclude from catch so you can use storage files and api to make call api

Related

React Router V6 doesn't show up the page?

I am trying to use react router v6. However when try those routes below, it just shows an empty page. What could be the problem ?
App.js
import React from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Home from './components/home';
function App() {
return <BrowserRouter>
<Routes>
<Route path='/' element={<Home />} />
<Route path='/hi' element={<div>hi</div>} />
<Route path='/bye' element={<div>bye</div>} />
</Routes>
</BrowserRouter>
}
export default App;
Home.jsx
import React from "react";
export default function Home(){
return <h1>Home</h1>
}
index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(
<App />, document.getElementById('root'))
It works. Check your libraries or Re-Install the Package(npm install).
After deleting package.lock file and node_modules
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
// import Home from "./home";
function Home() {
return <h1>Home</h1>;
}
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/hi" element={<div>hi</div>} />
<Route path="/bye" element={<div>bye</div>} />
</Routes>
</BrowserRouter>
);
}
export default App;

While using Route the site is not loading , when i am wrapping inside BroswerRoute only its working

this my App.js Code , not able to find any solution .All item are imported and its working fine if its not wrapped in Route
import React from 'react';
import './App.css';
import { BrowserRouter, Route } from "react-router-dom"
import Home from './Pages/Home';
import SignUpPage from './Pages/SignUpPage';
function App() {
return (
<div className="App">
<BrowserRouter>
<Route >
<Home />`enter code here`
</Route>
<Route path='/signup'>
<SignUpPage />
</Route>
</BrowserRouter>
</div >
);
}
export default App;
You're not wrapping your routes correctly, this is how it should be with react-router-dom v6:
import React from "react";
import './App.css';
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Pages/Home";
import SignUpPage from "./Pages/SignUpPage";
function App() {
return (
<div className="App">
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/signup" element={<SignUpPage />} />
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
You wrap your routes in a routes component, imported from react-router-dom. You can Then declare your route on one line <Route path="/insertPathHere" element={<YourComponent/>} />

why is my router not working in react - React.js

Can anyone tell me why my router is not working, I didn’t do anything to complicated with my app its one one page and I tried to add a router in app.js that has a link to my home page and every time i add router everything disappears from my app its just a white screen.
app.js
import "aos/dist/aos.css";
import { BrowserRouter as Router, Route, Routes} from "react-router-dom";
import Home from "./components/Home";
function App() {
return (
<div className="App">
<h1>Welcome to React Router!</h1>
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</div>
);
}
export default App;
Home.js
import React from 'react'
function Home() {
return (
<div>Home</div>
)
}
export default Home
index.js
import * as React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
Try using Switch instead of Routes and you also don't have to use triangular brackets in element
import Home from './components/Home';
import { Route, Switch } from 'react-router';
<Switch>
<Route path="/" element={Home} />
</Switch>
If you want all path begin with / go to your home page, you can change like this: <Route path="/*" element={} />

React Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app

[index.js]
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import clayful from 'clayful/client-js';
import axios from 'axios';
clayful.config({
client: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6ImE0Mzg5MjhjNWZkNjFiNzkwNzc5OTU3MGRiZmUyYzE5ZTQ...'
});
clayful.install('request', require('clayful/plugins/request-axios')(axios));
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
[App.js]
import logo from './logo.svg';
import React from 'react';
import './App.css';
import { Route, Router } from "react-router-dom";
import LandingPage from './pages/LandingPage/LandingPage';
import LoginPage from './pages/LoginPage/LoginPage';
import RegisterPage from './pages/RegisterPage/RegisterPage';
function App() {
return (
<Router>
<Route path="/" element={<LandingPage />} />
<Route path="/login" element={<LoginPage />} />
<Route path="/register" element={<RegisterPage />} />
</Router>
);
}
export default App;
React Error: You cannot render a inside another . You should never have more than in your app> error occurs. Give them a hand.
Is "react-router-dom" the problem?
Is it because of "react6" or do we need to downgrade to "react5"?
You're using two routers, as the error message suggests.
You have one in index.js:
<BrowserRouter>
And another in App.js
<Router>
Try it without the <Router> in App.js.
Both BrowserRouter and Router are considered to be routers. It looks like you may have a typo and should replace <Router> with <Routes> in App.js.
App.js in
Router -> Routes Change.

Installed React-Router - The URL changes, but not the view

I am using React-Router for the first time. I am trying to get the buttons on the homepage to go to its respective URL, but When I click on a button, the URL changes, but not the view. I don't get any errors on the console, either. I was wondering if somebody can point out what is happening. I wrapped each button with a link, and assigned the path it needs to go to when clicked. I was wondering if anyone can point out what I am doing wrong.
Homepage.js
import React from 'react';
import {Link} from "react-router-dom"
class HomePage extends React.Component {
render(){
return (
<div>
<h1>Welcome</h1>
<p>Please select a category </p>
<Link to="/ProgrammingJokes">
<button>Programming Jokes</button>
</Link>
<Link to="/DadJokes">
<button>Dad Jokes</button>
</Link>
<Link to="/SportsJokes">
<button>Sports Jokes</button>
</Link>
</div>
)
}
}
export default HomePage;
App.js
import React from 'react';
import HomePage from './components/HomePage'
import DadJokesApi from './components/DadJokesApi'
import SportsJokesApi from './components/SportsJokesApi'
import ProgrammingJokesApi from './components/ProgrammingJokesApi';
import { Route, Switch} from "react-router-dom";
function App() {
return (
<main>
<Switch>
<Route path="/" component={HomePage} />
<Route path="/DadJokes" component={DadJokesApi} />
<Route path="/SportsJokes" component={SportsJokesApi} />
<Route path="/ProgrammingJokes" component={ProgrammingJokesApi} />
</Switch>
</main>
);
}
export default App;
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<React.StrictMode>
<App />
</React.StrictMode>
</BrowserRouter>,
document.getElementById('root')
);
Try placing your root route at the end of the list.
Since:
A <Switch> looks through its children <Route>s and renders the first
one that matches the current URL.
From https://reacttraining.com/react-router/web/guides/quick-start
<Switch>
<Route path="/DadJokes" component={DadJokesApi} />
<Route path="/SportsJokes" component={SportsJokesApi} />
<Route path="/ProgrammingJokes" component={ProgrammingJokesApi} />
<Route path="/" component={HomePage} />
</Switch>
Your Switch is matching with the first route every time. You need to use
<Route exact path = '/' component = {Component}/>
You can use the exact property on your routes.
When true, will only match if the path matches the location.pathname exactly.
You can read more here https://reacttraining.com/react-router/web/api/Route/exact-bool
The result must be something like this:
<Route path="/DadJokes" exact component={DadJokesApi} />

Categories

Resources