Triyng for run basic example from here
I've got Yarn+Webpack2+Babel es2015
This is my entry point:
import React from 'react'
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom'
const BasicExample = () => (
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
</ul>
<hr/>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
</div>
</Router>
);
const Home = () => (
<div>
<h2>Home</h2>
</div>
);
const About = () => (
<div>
<h2>About</h2>
</div>
);
ReactDOM.render(
<BasicExample/>,
document.getElementById('root')
);
Project at http://localhost:8080 starting good and Links working fine, rendering content from Home and About components.
But when I'm trying to enter url http://localhost:8080/about - console showing me
GET http://localhost:8080/about 404 (Not Found)
I found many almost same questions on Stack, but not found solution working for me.
What exactly in react-router intercept incoming url?
It possible that this not working because of mine Yarn\Webpack settings?
____________UPDATE_1
Webpack config
const path = require('path');
let webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: path.join(__dirname, 'index.html'),
filename: 'index.html',
inject: 'body'
});
module.exports = {
/*devServer: {
host: "DESKTOP-A5FTMD8", // Can change port
port: 8080
},*/
entry: path.join(__dirname, 'index.jsx'),
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist')
},
module: {
loaders: [
{test: /\.(less|css)$/, loader: 'style-loader!css-loader!less-loader'},
{test: /\.(xml)$/, loader: 'xml-loader'},
{test: /\.(svg|png|jpg|jpeg)$/, loader: 'file-loader'},
{
test: /\.(js|jsx|es6)$/,
exclude: /node_modules/,
loader: 'react-hot-loader!babel-loader?presets[]=react,presets[]=es2015'
},
]
},
resolve: {
extensions: ['.js', '.jsx', '.es6']
},
plugins: [
HtmlWebpackPluginConfig
]
};
The problem solved by this solution in webpack config:
devServer: {
historyApiFallback: true <-- this needs to be set to true
}
This answer
Related
I am serving my static files from express and i can see that it loads index.html
But the problem is when on a rout for example localhost:8080/users and i refresh the page, the .css and main.js does not seam to be loaded so it returns blank page.. Any idea on what night be the problem?
My app.js
function App (){
return (
<div className="wrapper">
<Routes>
{routes.map(({ path, name, Component }, key) => (
<Route exact path={path} key={key} element={Component} />
))}
</Routes>
</div>
);
}
export default App
My index.js:
ReactDOM.render(
<Provider store={store}>
<React.StrictMode>
<BrowserRouter>
<Routes>
<Route path="*" element={<App />} />
</Routes>
</BrowserRouter>
</React.StrictMode>
</Provider>,
document.getElementById('root')
);
This is my webpack:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const Dotenv = require('dotenv-webpack');
const webpack = require('webpack');
require('dotenv').config({path:__dirname+'/../.env'})
module.exports = {
entry: {
app: path.join(__dirname, "/src/Index.js"),
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "main.js",
},
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
exclude: /node_modules/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
},
{
test: /\.css$/,
use: 'style-loader!css-loader'
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: "babel-loader",
},
{
test: /\.html$/,
exclude: /node_modules/,
use: "html-loader",
},
],
},
resolve: {
extensions: [".js", ".jsx"],
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
APP_API_URL : JSON.stringify(process.env.APP_API_URL)
},
}),
new Dotenv(),
new HtmlWebpackPlugin({
filename: "index.html",
template: "./src/index.html",
}),
new MiniCssExtractPlugin({
filename: "app.css",
chunkFilename: "[id].css",
}),
],
devServer: {
historyApiFallback: true,
contentBase: path.join(__dirname, "dist"),
compress: true,
port: process.env.PORT_CLIENT,
open: true,
stats: "errors-only",
}
};
Check out this finished example using React Router and compare it with your App.
https://stackblitz.com/edit/github-agqlf5?file=src%2Fmain.jsx
Developing a react app with webpack, in my app.js router when i specify the route to be /foo the component renders normally but when i specify a route as /foo/bar i get the following error
"The resource from “http://localhost:9000/foo/bar/bundle.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff)"
App.js
function App() {
return (
<div className="App">
<BrowserRouter>
<Router history={history}>
<Switch>
<Route exact path="/api/login" component={Login} /> //gives error
<Route exact path="/login" component={Login} /> //renders normally
<Route component={Error} />
</Switch>
</Router>
</BrowserRouter>
</div>
);
}
Webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, 'src/index'),
output:{
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module:{
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['#babel/react']
}
}
]
},
{
test: /\.css$/,
exclude: /node_modules/,
use:[
{loader: 'style-loader'},
{loader: 'css-loader'}
]
},]
},
devServer:{
contentBase: path.resolve(__dirname, 'dist'),
port: 9000,
historyApiFallback: true
},
plugins:[
new HtmlWebpackPlugin({
template: "src/index.html"
})
]
};
I was facing the same issue and solved it by adding publicPath: '/dist/' in the output option of module.exports in webpack.config.js.
Try to change the content-type to 'text/javasscript'.
content-type: "text\javasscript"
I am trying to use a switch that routes different components depending on a URL. This URl should be able to be nested, like courses/:cid/assignments/:aid.
This is how my Switch looks like:
<Switch>
<Route path='/courses/:cid/assignments/:aid' component={Assignment} />
<Route exact path="/" component={Home} />
</Switch>
The app runs fine: I can access the home page. However, when I access for example courses/1/assignments/20, I get the following error:
Loading failed for the <script> with source “http://localhost:8081/courses/1/assignmentsets/bundle.js”.
I fiddled around a bit with the paths, just to see where it went wrong and these are the results:
<Switch>
<Route path='/courses/:cid/assignments/:aid' component={Assignments} /> // Does not work
<Route path="/courses/randomnestedurl" component={Assignments} /> // Does not work
<Route path="/courses" component={Assignments} /> // Works fine
<Route path="/:aid" component={Assignments} /> // Works fine
<Route exact path="/" component={Home} /> // Works fine
</Switch>
Does anyone have an idea what could be wrong? Something with my webpack? Some setting I'm missing?
If more code needs to be provided, please let me know which parts of my application would be required.
EDIT: This is my webpack.config.js:
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const APP_PATH = path.resolve(__dirname, 'src');
module.exports = {
entry: APP_PATH,
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, '/dist'),
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.json']
},
module: {
rules: [
{ test: /\.(ts|js)x?$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test:/\.(s*)css$/, use:['style-loader','css-loader', 'sass-loader'] },
],
},
devServer: {
historyApiFallback: true,
proxy: {
'/api': {
target: 'http://localhost:8080',
secure: false
}
}
},
plugins: [
new HtmlWebpackPlugin({ inject: true, template: path.join(APP_PATH, 'index.html') }),
new ForkTsCheckerWebpackPlugin(),
]`enter code here`
};
That the browser is trying to load your bundle.js from http://localhost:8081/courses/1/assignmentsets/bundle.js indicates that the bundle.js is written as bundle.js instead of /bundle.js in the src attribute of the script tag in your index.html file.
To fix this you could add a publicPath to your Webpack config.
module.exports = {
entry: APP_PATH,
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, '/dist'),
publicPath: '/'
},
// ...
}
Looks like you have your script in the site like:
<script src="bundle.js"></script>
Edit it to be (/ before filename):
<script src="/bundle.js"></script>
i'm having 2 routes in my react-redux app:
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<div>
<Route path = '/a' component = {ContainerComponent} />
<Route path = '/b' component = {ContainerComponent} />
</div>
</BrowserRouter>
</Provider>,
document.getElementById('app'));
On http://localhost:8080/a i can see my ContainerComponent.
On http://localhost:8080/b i can also see my ContainerComponent.
But on http://localhost:8080/a/b i'm getting 404-error, although i expect to see two ContainerComponents at the same time, like i saw in many tutorials!
My webpack config:
var HTMLWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports = {
entry: __dirname + '/app/index.js',
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}, {
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader?modules,localIdentName="[name]-[local]-[hash:base64:6]"'
})
}]
},
output: {
filename: 'transformed.js',
path: __dirname + '/build'
},
devServer: {
historyApiFallback: true
},
plugins: [
HTMLWebpackPluginConfig,
new ExtractTextPlugin('styles.css')
]
};
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<div>
<Route path = '/a' component = {ContainerComponent} />
<Route path = '/b' component = {ContainerComponent} />
<Route path = '/a/b' component = {ContainerComponent} />
</div>
</BrowserRouter>
</Provider>,
document.getElementById('app'));
You need to define the third route also. Because of the functioning of the path matching, while not using the exact param, the BrowserRouter will match as many routes as defined whose path matches the URL browsed. In this case, with URL /a, you will get two components rendered. But if you browse URL /a/b, the only route that will match the path is the third one. Because you hadn't defined in your code you get a proper 404 error.
Ok, finally, solved the problem by modifying webpack.config.js. Replaced this:
output: {
filename: 'transformed.js',
path: __dirname + '/build',
},
with this:
output: {
filename: 'transformed.js',
path: __dirname + '/build',
publicPath: '/'
},
I'm trying to use react-router-dom 4, But am unable to navigate directly to a route.
Here's a sample of my code:
let Test = (props) => (<div>This is a test component</div>);
let About = (props) => (<div>About us</div>);
class App extends Component {
render () {
return (
<Router>
<div>
<nav>
<NavLink to="/about" activeClassName="selected">About</NavLink>
<NavLink to="/" activeClassName="selected">Test</NavLink>
</nav>
<Route exact path="/" component={Test} />
<Route exact path="/about" component={About} />
</div>
</Router>
)
}
}
When i try to just go to localhost:3000/about, i get Not Found in the browser. But when i go to just localhost:3000, then click on the About link, i get redirected just fine.
in my Console, i get
Uncaught Error: uBlock Origin: aborting content scripts for http://localhost:3000/about
at contentscript.js:90
I'm assuming you're using Webpack. If so, adding a few things to your webpack config should solve the issue. Specifically, output.publicPath = '/' and devServer.historyApiFallback = true. Here's an example webpack config below which uses both of ^ and fixes the refresh issue for me. If you're curious "why", this will help.
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './app/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js',
publicPath: '/'
},
module: {
rules: [
{ test: /\.(js)$/, use: 'babel-loader' },
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}
]
},
devServer: {
historyApiFallback: true,
},
plugins: [
new HtmlWebpackPlugin({
template: 'app/index.html'
})
]
};
when you go to localhost:3000/about,it's run server-side route,and the you don't set server-side route,so you got 404;when you go to just localhost:3000, then click on the About link,now, you run the client route that you have setted. In other word,it's run react-router-dom,so you can got the page