react-router-dom 4 routing questions - reactjs

Question

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

Answer 1

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'
})
]
};

Answer 2

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