我正在使用React路由器並嘗試在導航到特定URL時呈現組件。我嘗試了其他帖子提供的解決方案,但他們似乎都沒有爲我工作。我正在運行React Router + React + Flux。使用React Router + React + Flux直接路由到Url
這是我routes.js文件:
import React from 'react';
import About from './components/About'
import {Router, Route, IndexRoute, browserHistory, routes} from 'react-router';
import App from './components/App.jsx'
export default (
<Router history={browserHistory} routes={routes}>
<Route path="/" component={App} />
<Route path="/about" component={About} />
</Router>
);
這是我index.js文件
import './main.css';
import { Router, browserHistory } from 'react-router';
import routes from './routes'
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';
import About from './components/About.jsx';
import alt from './libs/alt';
import storage from './libs/storage';
import persist from './libs/persist';
const logger = require('morgan');
persist(alt, storage, 'app');
var bs = require('bootstrap');
import {Route, IndexRoute} from 'react-router';
ReactDOM.render(
<Router history={browserHistory} routes={routes}
<Route path="/" component={App} />
<Route path="/about" component={About} />
</Router>, document.getElementById('app'));
這是我試圖通過URL來渲染 「關於」 部分:關於.jsx:
import AltContainer from 'alt-container';
import React from 'react';
import { Link } from 'react-router';
import Navigation from './Navigation';
export default class Splash extends React.Component {
render() {
return (
<div className="">
<Navigation />
</div>
);
}
}
這是我App.jsx文件
import AltContainer from 'alt-container';
import React from 'react';
import BButton from './BButton.jsx';
import Navigation from './Navigation.jsx';
import Splash from './Splash.jsx'
import About from './About.jsx'
export default class App extends React.Component {
render() {
return (
<div>
<Navigation />
<Splash />
</div>
);
}
}
這是我webpack.config.js文件:
const path = require('path');
const merge = require('webpack-merge');
const webpack = require('webpack');
const NpmInstallPlugin = require('npm-install-webpack-plugin');
const TARGET = process.env.npm_lifecycle_event;
const PATHS = {
app: path.join(__dirname, 'app'),
build: path.join(__dirname, 'build')
};
process.env.BABEL_ENV = TARGET;
const common = {
entry: {
app: PATHS.app
},
resolve: {
extensions: ['', '.js', '.jsx']
},
output: {
path: PATHS.build,
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.css$/,
loaders: ['style', 'css'],
include: PATHS.app
},
{
test: /\.(js|jsx)$/,
loaders: [
'babel?cacheDirectory,presets[]=es2015,presets[]=survivejs-kanban'
],
include: PATHS.app
}
]
}
};
if(TARGET === 'start' || !TARGET){
module.exports = merge(common, {
devtool: 'eval-source-map',
devServer: {
contentBase: PATHS.build,
historyAPIFallback: true,
hot: true,
inline: true,
progress: true,
stats: 'errors only',
host: process.env.HOST,
port: process.env.PORT
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new NpmInstallPlugin({
save: true //--save
})
]
});
}
if(TARGET === 'build') {
module.exports = merge(common, {});
}
我開始回答這個問題,但有幾件事情可能是原因。我會仔細閱讀這些文檔https://github.com/reactjs/react-router/tree/master/docs。總之,你的前端路由是錯誤的(你在routes.jsx和index.js中有一個來啓動),你可能會錯誤地在webpack-dev-server中使用historyAPIFallback,並且我不知道你的服務器代碼的外觀喜歡。 –
mgmcdermott
我正在使用webpack dev服務器。服務器張貼在上面。我已經閱讀了幾個小時的文檔。感謝您提供的任何指導。 – CodeYogi