I've made a front end in reactjs and back end of application in Spring Boot. When I do npm run build and build a static version of the app to put it in the static folder of Spring Boot application, my Route Paths in react stop working. When I try to get to localhost:8080/choose or localhost:8080/account it says 404 not found, but in normal front end application it works correctly.
import React, {useEffect, useState} from 'react'
import logo from './logo.svg';
import './App.css';
import GoogleLogin from "react-google-login";
import {BrowserRouter, Routes, Route, Navigate} from "react-router-dom";
import Choose from "./Choose/Choose.js";
import Main from "./Main/Main.js";
import Account from "./Account/Account.js";
function App() {
return (
<div className="App">
<BrowserRouter>
<Routes>
<Route path={'/'} element={
<Main></Main>
}
>
</Route>
<Route path={'/choose'} element={
<Choose></Choose>
}>
</Route>
<Route path={'/account'} element={
<Account></Account>
}>
</Route>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
Related
It's been an hour now and I can't figure out how to import Router, Route and Switch even after reading countless pages.
My index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import './NavImages.css'
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
My app.js
import React, { Component } from 'react';
import Home from './Home';
import Settings from './Settings';
import Info from './Info'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import { Switch } from "react-router";
class App extends Component {
render() {
return (
<div className="app">
<Router>
<Switch>
<Route exact path="/" component={Home}/>
<Route exact path="/settings" component={Settings}/>
<Route exact path="/info" component={Info}/>
</Switch>
</Router>
</div>
);
}
}
export default App;
Doing this, I get
You cannot render a inside another . You never need more than one.
Even though I dont.
So I tried importing it in a different way.
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
And I get the error
Attempted import error: 'Switch' is not exported from 'react-router-dom'.
I've tried many more, but it's not worth posting here. Also if it matters, here is my versions.
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
How do I import all three of these things without an error?
If you use the <BrowserRouter> around your <App> inside your index.js (like in your case) you can just use the <Switch> directly in child components.
Make sure you import the components correctly (Route from react-router and Switch from react-router-dom).
// imports
import { Route } from "react-router";
import { Switch } from "react-router-dom";
// render
<Switch>
<Route exact path="/" component={Home}/>
<Route exact path="/settings" component={Settings}/>
<Route exact path="/info" component={Info}/>
</Switch>
I've successfully deployed my react app on digital ocean as a static site. But when I click to see the live app the link only shows me a blank page, instead of show me the landing page (dashboard).
The command I used for the build
npm build
The code in my index.js file
import React from "react";
import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";
import { Router, Route, Switch, Redirect } from "react-router-dom";
// core components
import Admin from "layouts/Admin.js";
import RTL from "layouts/RTL.js";
import "assets/css/material-dashboard-react.css?v=1.9.0";
import 'bootstrap/dist/css/bootstrap.min.css';
const hist = createBrowserHistory();
ReactDOM.render(
<Router history={hist}>
<Switch>
<Route path="/admin" component={Admin} />
<Route path="/rtl" component={RTL} />
<Redirect from="/" to="/admin/dashboard" />
</Switch>
</Router>,
document.getElementById("root")
);
my project structure
[1]: https://i.stack.imgur.com/JL2Yi.png
I found the solution. I just had to edit the package.json file and change the homepage attribute like this:
"homepage": ""
My backend is in django. I can get post data from there and also post list.
In reactjs, I am just displaying post details and lists (and some more details related to posts...)
In reactjs my index.js file is as below
import ReactDOM from "react-dom";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import React from "react";
import { BrowserRouter } from "react-router-dom";
import { GoogleReCaptchaProvider } from "react-google-recaptcha-v3";
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root"),
);
serviceWorker.unregister();
My app.js file is as below
import React from "react";
import { Route, Switch } from "react-router-dom";
import HomePage from "./pages/HomePage";
import BlogPage from "./pages/BlogPage";
import "./css/styles.css";
import CategoryPostsPage from "./pages/CategoryPostsPage";
import SearchPage from "./pages/SearchPage";
import ContactPage from "./pages/ContactPage";
function App() {
return (
<main>
<Switch>
<Route path="/post/:slug/" component={BlogPage} />
<Route
path="/category/:slug/"
component={CategoryPostsPage}
/>
<Route
path="/query/:query/"
component={SearchPage}
/>
<Route path="/contact/" component={ContactPage} />
<Route path="/" component={HomePage} />
</Switch>
</main>
);
}
export default App;
I add new posts from backend (django admin panel).
And through API, react app gets data from backend.
I want to have all urls like
/post/some-slug
/post/some-slug-2
...
/
/contact/
...
This is for SEO purpose, When I search, it displays only homepage url and contact page url, not a single url for any post...
Please suggest, what should I do,
I have tried sitemap packages from npm, but doesn't seem working...
I am attempting to serve a react app from the public folder of my rails app. I am building the js file and putting it in the public folder. When I go to the root of the app, I can see that the js and my index.html page have loaded. However, when I try to go to page, like /landing, I get a 404, route not found from Rails. I can't figure out why the react router is not kicking in. This all works on dev where I am serving the react app with a second server, I only get this issue in production. Any suggestions?
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.scss';
ReactDOM.render(<App />, document.getElementById('root'));
App.js
import React from 'react';
import Auth from './util/auth';
import { Redirect, BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import MyAccount from './components/my_account';
import MyListings from './components/my_listings';
import LoginPage from './components/login_page';
import LandingPage from './components/landing_page';
import RegistrationForm from './components/registration_form';
import PasswordResetForm from './components/password_reset_form';
import RequestPasswordResetForm from './components/request_password_reset_form';
import {FlashMessages} from './components/flash_messages';
import $ from 'jquery';
import popper from 'popper.js';
import './stylesheets/App.css';
window.Popper = popper;
window.jQuery = $;
window.$ = $;
global.jQuery = $;
require('bootstrap');
const App = appProps => (
<div>
<div id="flash-messages">
<FlashMessages />
</div>
<Router>
<div className="App">
<Switch>
<Route exact name="index" path="/landing" component={LandingPage} />
<Route exact name="login" path="/login" component={LoginPage} />
<Route exact name="register" path="/register" component={RegistrationForm} />
<Route exact name="reset_password" path="/reset_password" component={PasswordResetForm} />
<Route exact name="reset_password_request" path="/reset_password_request" component={RequestPasswordResetForm} />
<PrivateRoute path="/my_account" component={MyAccount}/>
<PrivateRoute path="/my_listings" component={MyListings}/>
</Switch>
</div>
</Router>
</div>
);
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={props => (
Auth.isAuthenticated() ? (
<Component {...props}/>
) : (
<Redirect to={{
pathname: '/login',
state: { from: props.location }
}}/>
)
)}/>
)
export default App;
A typical gotcha with React Router is that you need to return the same index.html page for all routes - be it /, /landing-page/ or /a/really/deep/route/.
You typically solve that by adding a catch-all route. I don't know rails all that well, but I think this answer might help you out.
The problem is that all routes handled first by rails and he redirects you to the page where your react routers are. And you have only one HTML page that contains your react.js code.
When you go to /login or any other page you get err 404 because you don't have a route in rails to handle it.
You need to add rails routes for all your pages and redirect them to the same index page
Or do a catch all routes to the same index page
There's some documentation for configuring your server. Basically you always need to return index.html with a 200 status code.
https://github.com/ReactTraining/react-router/blob/v3/docs/guides/Histories.md#configuring-your-server
I'm using react with express using web pack but react router dom create an error i.e The null match problem.It can't get the page and the match is Null.
MY routes page code is: routes.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route} from 'react-router-dom';
import App from './App.js';
import language from './language.js';
import Page from './Page.js';
const Routes = () => (
<Router>
<div>
<Route path='/' component={App} />
<Route path='/page' component={Page} />
<Route path='/language' component={language} />
</div>
</Router>
)
console.log(typeof Routes)
export default Routes;
I have created sample snippet same as your code.
But its working fine. I am not getting any error
Check out this Snippet