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
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;
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/>} />
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={} />
[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.
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} />