I am new to react and have no idea why this wouldnt be working.
My router code is here:
import React from 'react';
import { Route, IndexRoute } from 'react-router';
import App from './components/App';
import HomePage from './components/home/HomePage';
export default (
<Route path="/" component={App}>
<IndexRoute component={HomePage} />
<Route path="example" component={HomePage} />
</Route>
);
So what happens with this code is:
localhost/ displays fine
localhost/example does not display
localhost/example link from the header on the homepage displays, but pressing refresh does not
Thanks for any help, I appreciate it!
here is my webpack config:
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
context: path.join(__dirname, "/client"),
entry: [
'webpack-dev-server/client?http://127.0.0.0:5000/',
'webpack/hot/only-dev-server',
'react-hot-loader/patch',
'./src/index.js'
],
output: {
path: path.join(__dirname, "/client/dist"),
filename: '[name].js',
publicPath: '/'
},
resolve: {
extensions: ['.js', '.jsx', '.json']
},
devServer: {
historyApiFallback: true
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [ 'babel-loader', 'react-hot-loader/webpack' ],
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './static/template.html',
inject: 'body',
filename: 'index.html'
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
})
]
};
app.js snippet:
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(__dirname + 'client/dist'));
app.use(webpackDevMiddleware(compiler, {
publicPath: webpackConfig.output.publicPath,
hot: true,
historyApiFallback: true,
stats: {
colors: true
}
}));
I am using localhost:5000 . The question linked did not fix my problem
FYI, Starting in version 4.0, React Router no longer uses the IndexRoute.
Also for your path, change "example" to "/example"
Related
I'm new to WebPack, and it's hard to debug it and I can't seem to find any right answer on google.
I'm trying to use react router, but it seems like it needs a lot of configuration to make it work exactly like create-react-app's.
React router sub-routes seems to work only when you redirect it with the Link component, example:
// App.jsx
<Route path="/profile/me/" element={<PrivateRoute component={Profile} />}>
<Route path="create" element={<PrivateRoute component={CreateProfile} />} />
</Route>;
// Sub-Component - Profile.jsx
<Link to="create">
<Button color="primary" variant="contained">
Set It Up
</Button>
</Link>;
But when I try to enter the URL in the browser search bar, I get an error:
GET
http://localhost:3000/profile/dist/bundle.js [HTTP/1.1 404 Not Found 4ms]
The resource from “http://localhost:3000/profile/dist/bundle.js” was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
create
Here's my Webpack config:
const path = require("path");
const webpack = require("webpack");
const Dotenv = require('dotenv-webpack');
module.exports = {
entry: "./src/index.js",
mode: "development",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
loader: "babel-loader",
options: {
presets: ["#babel/env"],
},
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.js$/,
include: /node_modules\/react-dom/,
use: ["react-hot-loader/webpack"],
},
],
},
resolve: {
extensions: ["*", ".js", ".jsx"],
},
output: {
path: path.resolve(__dirname, "dist/"),
publicPath: "/dist/",
publicPath: "/profile/dist/",
filename: "bundle.js",
},
devServer: {
// contentBase
static: {
directory: path.join(__dirname, "public/"),
},
port: 3000,
// publicPath
devMiddleware: {
publicPath: "https://localhost:3000/dist/",
},
// hotOnly
hot: "only",
// To use router
historyApiFallback: true,
// Proxy
/*proxy: {
"/api/v1": "http://localhost:8000",
},*/
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new Dotenv({
systemvars: true,
}),
],
};
Hello i am stuck with this one and couldnt figure it out. So i have React router v6 with basename - "/ui/" , and i want that when i open localhost:8080 that it automatically turns into "localhost:8080/ui/" because the real view is actually rendered in /ui/ route.
Router setup:
<BrowserRouter basename="/ui/">
...routes here
</BrowserRouter>
Webpack dev:
module.exports = {
mode: 'development',
devtool: 'cheap-module-source-map',
devServer: {
hot: true,
historyApiFallback: true,
open: true,
port: 6969
}
}
And common webpack:
module.exports = {
entry: path.resolve(__dirname, '..', './src/index.tsx'),
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
module: {
rules: [
{
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
},
],
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
"css-loader",
// Compiles Sass to CSS
"sass-loader"
]
},
{
test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
type: 'asset/resource',
},
{
test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
type: 'asset/inline',
},
],
},
output: {
path: path.resolve(__dirname, '..', './build'),
filename: 'bundle.js',
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '..', './src/public/ui/index.html'),
}),
],
stats: 'errors-only',
}
I have tried to add to output publicPath: '/ui/' but it didnt work.
Or even something like this:
static: [
{
publicPath: '/',
directory: path.join(__dirname, "../public/ui/"),
}]
How i can achieve this withouth "redirecting" :\
Try this solution
<Route exact path="/">
<Redirect to="/home" />
</Route>
Check your main.js or similar in your src or sources.
Mine had:
const Root = () => (
<Provider store={store}>
<Router history={history}>
<Route path="/" component={App}>
{appRoute}
</Route>
</Router>
</Provider>
);
and so just had to move it to Route path="/ui/" component={App}
I routed in my app as the following:
render(
<Provider store={store}>
<Router history={browserHistory }>
<Route path={"/" component={TopContainer}>
<IndexRoute component={Login} />
<Route path='main' component={Maintainer} />
</Route>
</Router>
</Provider>,
document.getElementById('root')
)
Then I deploy my production bundle.js and index.html directly under my web root (apache in ubuntu).
I can access my app at http://...com/
The problem is that after the main page is loaded with route
<Route path='main' component={Maintainer} />
the content in browser location becomes: http://...com/main
At this time, if I reload the page with the url (http://...com/main) I got a page not found error: "The requested URL /main was not found on this server."
Here the my webpack.production.config.js
var webpack = require('webpack');
var path = require('path');
var loaders = require('./webpack.loaders');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var WebpackCleanupPlugin = require('webpack-cleanup-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
loaders.push({
test: /\.scss$/,
loader: ExtractTextPlugin.extract({fallback: 'style-loader', use : 'css-loader?sourceMap&localIdentName=[local]___[hash:base64:5]!sass-loader?outputStyle=expanded'}),
exclude: ['node_modules']
});
module.exports = {
entry: [
'./src/index.js'
],
output: {
publicPath: './',
path: path.join(__dirname, 'public'),
filename: '[chunkhash].js'
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
loaders
},
plugins: [
new WebpackCleanupPlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
screw_ie8: true,
drop_console: true,
drop_debugger: true
}
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new ExtractTextPlugin({
filename: 'style.css',
allChunks: true
}),
new HtmlWebpackPlugin({
template: './index.html',
files: {
css: ['style.css'],
js: ['bundle.js'],
}
})
]
};
But if I run it on the local server, there is not such a problem:
"use strict";
var webpack = require('webpack');
var path = require('path');
var loaders = require('./webpack.loaders');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var DashboardPlugin = require('webpack-dashboard/plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
const HOST = process.env.HOST || "127.0.0.1";
const PORT = process.env.PORT || "3000";
loaders.push({
test: /\.scss$/,
loaders: ['style-loader', 'css-loader?importLoaders=1', 'sass-loader'],
exclude: ['node_modules']
});
module.exports = {
entry: [
'react-hot-loader/patch',
'./src/index.js', // your app's entry point
],
devtool: process.env.WEBPACK_DEVTOOL || 'eval-source-map',
output: {
publicPath: '/',
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
loaders
},
devServer: {
contentBase: "./public",
// do not print bundle build stats
noInfo: true,
// enable HMR
hot: true,
// embed the webpack-dev-server runtime into the bundle
inline: true,
// serve index.html in place of 404 responses to allow HTML5 history
historyApiFallback: true,
port: PORT,
host: HOST
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
new webpack.HotModuleReplacementPlugin(),
new ExtractTextPlugin({
filename: 'style.css',
allChunks: true
}),
new DashboardPlugin(),
new HtmlWebpackPlugin({
template: './index.html',
files: {
css: ['style.css'],
js: [ "bundle.js"],
}
}),
]
};
I also tried it on a node.js web server and got the same problem.
Is the contentBase: "./public" made it?
thanks
coolshare
With Vincent's suggestion, I added some redirects to my Apache config
DocumentRoot /var/www
Redirect permanent /main http://...com/
This work partially: Apache did route http://...com/main to http://...com/
The problem is that from then on React takes over but it routes it to the login screen instead of what I expected - stay in the current screen http://...com/main when reload the browser page.
"If you route this URL to your index.html then the JS router will activate and display the correct page." is not true: I tried
Redirect permanent /main http://...com/index.html
and Apache did not recognize the http://...com/index.html
But Apache
It seems no way to route it to the main page...
Hello i have a problem with react-router, my code
ReactDOM.render(
<Provider store={store}>
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={StartPage}/>
<Route path="/matches" component={MatchesPage} />
<Route path="/sector/:idparam" component={SectorsPage} />
</Route>
</Router>
</Provider>,
app);
When I call /matches everything is OK, but when i try GET /sector/15 app failed try to load http://localhost:8080/sector/client.min.js but normally will load from default path (/)
Webpack:
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
module.exports = {
context: path.join(__dirname, "src"),
devtool: debug ? "inline-sourcemap" : null,
entry: "./js/client.js",
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
}
}
]
},
output: {
path: __dirname + "/src/",
filename: "client.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({mangle: false, sourcemap: false}),
],
devServer: {
historyApiFallback: true,
contentBase: './',
hot: true
},
};
I don't think the issue is with react router, or even webpack. I think your issue is related to how you are requiring your client js file, although since you didn't include that section of code I cannot confirm.
It looks like you are including the script relative to your path
(<script src="client.min.js"></script> no leading slash) instead of an absolute path (<script src="/client.min.js"></script>).
I am trying to set up my routers for my app, and have the basic / entry point working (seemingly). It seems when I try to start adding sub routes, it is breaking. I have a pretty straight forward set up right now. I am using react + redux and my render looks like :
ReactDOM.render(
<Provider store={store}>
<Router history={browserHistory} >
<Route path="/" component={comp1.Component}>
<Route path="test" component={comp2.Component} />
</Route>
</Router>
</Provider>,
// eslint-disable-next-line no-undef
document.getElementById('app')
);
I am running webpack dev server on localhost:8080, and it serves the first route with no problem, however when I go to localhost:8080/test, I am getting a Cannot GET /test .
Here is my webpack config:
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./client/app.jsx'
],
output: {
path: path.join(__dirname, ''),
filename: 'bundle.js',
publicPath: '/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
],
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: "babel-loader",
include: __dirname,
query: {
presets: [ 'es2015', 'react', 'react-hmre' ]
}
}]
}
}
Unsure what I am doing wrong here, would be grateful for any help. Thanks!
React Router uses the HTML5 history API. This means that 404 responses need to serve /index.html.
The docs mention how this works. You need to add this to your module.exports object:
devServer: {
historyApiFallback: true
}
Note that this only works for the CLI, when using the Node.js API you need to add this as a second parameter:
var server = new WebpackDevServer(compiler, { historyApiFallback: true });