If we wanted to change route programatically inside redux, we used to use react-router-redux npm package. However it was archived by its author. Now the recommended solution is connected-react-router:
https://www.npmjs.com/package/connected-react-router
But as the docs say in this package, it should be used INSTEAD of react-router to make it work.
Normally I was using react-router-dom:
import { BrowserRouter } from 'react-router-dom';
<BrowserRouter>
<Route path='/' />
<Route path='/hey' />
</BrowserRouter>
But as the docs say, I have to replace react-router v4/v5 with ConnectedRouter from package:
import { ConnectedRouter } from 'connected-react-router';
<ConnectedRouter history={history}>
<Route path={'/'} />
<Route path={'/foo'} />
</ConnectedRouter>
But this situation causes problem with Link from react-router-dom. Link has to be placed inside BrowserRouter, but I CANT USE IT because there's no BrowserRouter because AS THE DOCS ARE SAYIN - "Remember to delete any usage of BrowserRouter or NativeRouter as leaving this in will cause problems synchronising the state."
Problem is that ConnectedRouter is a connected version of react-router, not react-router-dom, so theres nothing like Link or NavLink in it.
There must be some way, if not I believe this package wouldnt have 3k stars on github...
Question: How to use Link inside ConnectedRouter? Thanks!
I recommend you to stick to to react-router-dom only.
There is no need for connecting it to redux anymore. In the past there could be a reason because it was hard to read the current pathname or search param, since only main page components were receiveing these as location. But right now you can read from anywhere thanks to withRouter.
Also you can use history to push routes. This was also a headache in the past.
Related
I have a multi-page application that doesn't use Node. It has a bunch of HTML and JavaScript files. I want to render React components in the application, which I found I am able to do with ReactDOM.render.
However, I am building out the React components separately in a project made with npx create-react-app. I can use npm run build which gives me a main.js file that contains a production ready version of all my components.
I can add this main.js file into my HTML files with a script tag to have my components render in my multi-page application.
However, the problem is that I notice when I run npm build, I get one main.js file that contains everything. This is not good because the app will run too slow if I have to load all of my React components in main.js file every time I go to a new page.
Instead, I am looking to only load the specific components I need for a page.
Example:
Let's say I had a test1 component and a test2 component.
Page1 has a script to use test1, so I only want to load test1 on Page1.
Page2 has a script to use test2, so I only want to load test2 on Page2.
Therefore, I need a test1.js file and a test2.js file after npm run build
How would I do this?
Sounds like a use case for Code Splitting.
If you want to split per-page with React Router you can do the following:
import React from "react";
import { render } from "react-dom";
import {
BrowserRouter,
Routes,
Route,
} from "react-router-dom";
const Home = React.lazy(() => import("./Home"));
const Contact = React.lazy(() => import("./Contact"));
render(
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</BrowserRouter>,
document.getElementById("root")
);
This should generate multiple JS files for different components (e.g. pages) when used with some standard build tools like create-react-app.
if someone could help that'd be great. I am following a react tutorial except at some point chrome went blank. When I inspect the page, nothing is in the body html tags. The code compiles and builds successfully though. I'm thinking it's a stupid typo or something, but I am no pro. Please let me know if you find my error!
Terminal On Build
you created the router but no routes. in app.js
import React from "react"
import {
BrowserRouter as Router,
Switch,
Route
} from "react-router-dom"
import Home from './pages'
function App () {
return (
<Router>
<Switch>
<Route exact path="/">
<Home />
</Route>
</Switch>
</Router>
);
}
export default App;
Hi all it was a problem in one of my components. The lack of error messages made me think it had something to do with the construction of the app.
I created a react app that will be served from /example-path. I defined it in the package.json like this:
"homepage":"/example-path"
It has worked so far, but now I would like to add routing with react-router-dom, and it incorrectly detects /example-path as the part of the URL.
This is my code:
<Router>
<Switch>
<Route path="/product/:id" children={<DisplayProduct />} />
</Switch>
</Router>
Unfortunately react-router-dom tries to match the full URL /example-path/product/10. How is it possible to avoid that? Is it possible to access the homepage variable somehow?
I could use <Router basename="/example-path">, but in that way, this parameter is a duplicate. I would like to define it in only one place.
How is it possible to access homepage from package.json in a react app?
We can access the URL set in package.json's homepage field using PUBLIC_URL environment variable.
We sometimes use a relative URL to deploy the application in subdirectories for example we are deploying the application in https://myhostname.com/example-path.
In order to do that, we can either set the environment variable PUBLIC_URL=/example-path for the application build or set the package.json homepage attribute to "/example-path". In your case, you have set the
"homepage": '/example-path/'
then the PUBLIC_URL would be set to /example-path/. Now you can access this environment variable anywhere in your react application.
<Router basename={process.env.PUBLIC_URL}>
<Switch>
<Route path="/product/:id" children={<DisplayProduct />} />
</Switch>
</Router>
After running the npm run build, you can check in the build/index.html that all the places where you used the %PUBLIC_URL% is set to /example-path/ like below;
<script type="text/javascript" src="/example-path/static/js/main.ec7f1972.js">
The Router doesn't know anything about your package.json. It just looks at the browser location. You can set a basename if you use BrowserRouter:
import {BrowserRouter as Router} from 'react-router';
<Router basename="/example-path">
{/* ... */}
</Router>
Edit: With the addition of environment variables to react-scripts#0.2.3 and higher prefer #Alan Omars answer: Prefix an environment variable with REACT_APP_ and it will be exposed to the client at build time. docs
Here's the old answer that uses the fact that Webpack blindly replaces %PUBLIC_URL%in index.html:
Assuming you are using create-react-app, this is actually pretty straightforward:
Add the following to public/index.html:
<script>
window.PUBLIC_URL = "%PUBLIC_URL%";
</script>
now you can reference the homepage from JavaScript! Simply access it via
const myPublicUrl = window.PUBLIC_URL;
Note: The variable will be an empty string if no homePage field is set in the package.json, so we have to compensate for that:
<Router basename={window.PUBLIC_URL && window.PUBLIC_URL.length > 0 ? window.PUBLIC_URL : "/"}>
{/* ... */}
</Router>
Since you are using create-react-app package you can use environment variable instead of "homepage":"/example-path" in your package.json:
create .env file in the root of your project.
add REACT_APP_HOME_PAGE='/example-path/' to the .env file
now you can access your env variable through
process.env.REACT_APP_HOME_PAGE in your app like the following:
<Router basename={process.env.REACT_APP_HOME_PAGE}>
I don't know where is the location of your Router file but you can try to import it as json in src/index.js file that created by create-react-app cli app like below;
import myPackageJson from '../package.json';
or
import { homepage } from '../package.json';
I am new to learning React and so far as I have been exploring its amazing. I have a quick question which is how can I display multiple modules such as "app.js" and "About.js" on one page? is this possible?
Here is some images that may help.
React App.js and About.js
React index.js
React js console error
Commonly in a react app, you will route based on different URLs.
The different 'modules' (also known as components) are typically defined in other JS files. See the HomePage and AboutPage files in the example below.
First, import the other pages.
Second, route to them given a path.
A common routing solution in React is React Router
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import HomePage from './pages/HomePage.js';
import AboutPage from './pages/AboutPage.js';
const MyApp = () => (
<BrowserRouter>
<Switch>
<Route path="/home" component={HomePage} />
<Route path="/about" component={AboutPage} />
</Switch>
</BrowserRouter>
);
When I enter localhost:8080 in my browser it displays App.js component. But when I navigate to localhost:8080/#/hello it displays same App.js component instead of hello.js. localhost:8080/hello show "can not get localhost:8080/hello" . What is the problem with my code? I am using webpack and babel in my App.
//index.js
import React from 'react';
import ReactDOM, { render } from 'react-dom';
import { Provider } from 'react-redux';
import {store} from './public/store/store';
import App from './public/Components/App';
import Hello from './public/Components/hello';
import {
BrowserRouter as Router,
Route
} from 'react-router-dom';
//import './index.css'
render(
<Provider store={store}>
<Router>
<div>
<Route path="/" component={App}/>
<Route path="/hello" component={Hello}/>
</div>
</Router>
</Provider>,
document.getElementById('root')
)
//App.js
import React from 'react';
export default class App extends React.Component {
render() {
return (
<div>
<h1>React Js.</h1>
</div>
);
}
}
//hello.js
import React from 'react';
export default class Hello extends React.Component {
render() {
return (
<div>
<h1>Hello</h1>
</div>
);
}
}
There are a few things happening here, let me try to explain what's going wrong and how you can fix them.
http://localhost:8080/#/hello it displays the same App.js component instead of hello.js.
Because you are using BrowserRouter instead of HashRouter (an older version, # is not working). The browser reads only the first part of your URL which is http://localhost:8080/. The # is similar when you route to a section of a page using the following.
Goto projects
The above keeps the user on the same page but scrolls to the section <div id="projects"></div>
Don't use this, if your are using React Router V4 it's not what you are looking for.
http://localhost:8080/hello displays cannot get http://localhost:8080/hello
You probably don't have a dev server running that supports front-end routing. If you don't, basically what is happening is that by pressing enter you tell the SERVER to serve you page, http://localhost:8080/hello. You don't want this, the server should be passive here and not serve you any other page then your main index.html. So, instead, you want the server to give you http://localhost:8080 and by doing so, it loads your main index.html and scripts, then react takes over, react-router checks the url and it then renders you the /hello route with the Hello component.
In order to achieve this make sure you have webpack-dev-server installed. You can do this by typing the following in the command line.
npm install webpack-dev-server --save-dev
Then add the following to your package.json
devServer: {
publicPath: '/',
historyApiFallback: true
}
// add the below line to the scripts section
"start:dev": "webpack-dev-server"
This basically tells the dev-server to re-route all requests to index.html, so react-router takes care of the routing. Here's more on Webpack-dev-server.
Then in your terminal run npm run start:dev to start the development server.
I hope this all makes sense and with these guidelines you're able to make your code work. If not let me know ;)
NOTE: Alex has a good point as well. React Router v4 renders all routes that match. So, if the path is http://localhost:8080/hello
/ and /hallo both match and will render. If you only want to render one, use exact as Alex mentions, or wrap your routes in a <Switch> component.
<Switch>
<Route path="/" component={App}/>
<Route path="/hello" component={Hello}/>
</Switch>
Here's what the react-router docs say.
Renders the first child or that matches the location
UPDATE:
After the OP uploaded a repo with the problem, the following was corrected to make the routes work. If anyone is interested, the fixed project is on GitHub.
Main points to make the project work:
Use react-router-dom instead of react-router
Tell Express route all incoming traffic to index.html app.get("/*", (req, res) => res.sendFile(__dirname + '/public/index.html'));
Use <Switch> and <Route> components to setup the routes as described in the question. See code here.
Try to use exact directive:
<Route exact path="/" component={App} />
See API doc: https://reacttraining.com/react-router/web/api/Route/exact-bool