When I press the back button in my app, a second root component gets created. Any ideas? Thanks.
var history = require('history/lib/createBrowserHistory');
<Router history={history()}>
<Route path='/' component={App}>
<Route .../>
<Route .../>
<Route .../>
</Route>
</Route>
The problem turned out to be that Turbolinks was enabled. Since my app is SPA throughout, I just removed //= require turbolinks from my application.js.
I had a similar problem. I solved it by disabling cache for turbolinks.
<head>
...
<meta name="turbolinks-cache-control" content="no-cache">
</head>
document are here: https://github.com/turbolinks/turbolinks#opting-out-of-caching
I think turbolinks load the cached js files and then load the fetched js files, which may cause your react component to render twice
Related
I am trying to fix a button in a NextJS app that is inside of the authentication. The app does not use pages for authenticated routes, everything is /# and I am trying to figure out how to route the Settings component from a button. The original developer did not want to have any page paths in authentication.
Is there a process like in React, such that I can route to a component not page?
<Router>
<Switch>
<Route path='/settings'>
<Settings />
</Route>
</Switch>
<Router>
I feel like withRouter might be the key, but I cannot find the path I need to the component.
I think that you approch Is not the best for a nextjs app.
Anyway you can disable the nextjs file system routing in nextjs config and use a custom server
module.exports = {
useFileSystemPublicRoutes: false,
}
Then you can use the react-router component.
Take a look at this tutorial to see a more detailed example.
Hello and thanks in advance for any feedback.
I am building out an app with React Router 6 with several nested routes.
The issue that I keep running into is that on-page refresh the router navigates back to the base route...
meaning if I am on /about and hit refresh - the App is going to navigate back to the '/' URL.
It may be worth adding that if I click on <- back or forward -> browser buttons the app behaves as expected and navigates to the previous URL.
This is obviously less than ideal.
I know the question is a bit old but to avoid the navigation to / on refresh, you could use <Link> which react-router-dom provides.
App.jsx
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About/>} />
</Routes>
Login
So, user when he click on login button, he schould be redirected to loginpage which is inside of subfolder in src, imported file in app.js, and given above code in the localhost its showing like this http://localhost:3000/LoginPage.js but not redirecting
install react-router-dom on your client using: npm i --save react-router-dom
Try this:
import { Link} from "react-router-dom";
..............................
...........................
<button>
<Link to="/login">
Login
</Link>
</button>
............................
.....................
Make sure to have this in your main App.js component:
<Route exact path="/login" component={Login} />
I have a react app published on github pages, my hompage and repository is /websiteName so it's working when I'm at the hompage, ex: username.github.io/websiteName. But I also have a route which is /user/:id, so when I click a link it will redirect me to username.github.io/user/123 thus giving me a 404 error. So how do I fix the 404 error when redirecting to a different route other than /websiteName.
Edit
I now added hash router, but when I click a Link with a path of /user/:id, it redirects me to https://username.github.io/websiteName/#/user/123. Then it gives me a blank page.
<HashRouter>
<Route exact path="/" component={User} />
<Route path="/user/:slug" component={Info} />
</HashRouter>
when I add a basename of /websiteName I get double slashes because my homepage name on package.json
I'm having trouble getting polymer elements to show up on my parse app.
The file directory looks like this:
/cloud
/views
app.js
main.js
/config
global.json
/public
/components
/css
index.html
in index.html I have the imports like this:
<!-- css -->
<link type='text/css' rel="stylesheet" href="../css/main.css">
<!-- polymer -->
<link rel="import" href="../components/paper-tabs/paper-tabs.html">
and a paper button in the body:
<paper-button>PAPER BUTTON</paper-button>
However, when I deploy, the paper button doesn't show up. The css is applied correctly though, which is so weird, since if /public/index.html can access /css then why not /components??
To debug I moved the step-1 folder from the polymer tutorial into /public so that the file directory is like this:
/cloud
/views
app.js
main.js
/config
global.json
/public
/components
/css
/step-1
index.html
index.html
I've verified that when I run the app on localhost and go to
http://localhost:8000/public/step-1/
The polymer elements show up correctly. I'm unable to access this on the deployed parse app though, and I'm not sure how to set up routing correctly.
btw, app.js contains the default routing configurations:
app.set('views', 'cloud/views'); // Specify the folder to find templates
app.set('view engine', 'ejs'); // Set the template engine
app.use(express.bodyParser()); // Middleware for reading request body
I looked at the expressjs docs and tried adding
app.use(express.static(__dirname + '/bower_components'));
and installing polymer at the app's root directory and using corresponding imports, but it still doesn't work.
What am I missing?
LOL. Forgot the polymer js import and imported paper tabs instead of paper button.
Fixed:
<!-- polymer -->
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/paper-button/paper-button.html">
I have a similar issue, The samples what polymer has given they run correctly on python http server.