反应不呈现重定向页面内容

Question

React 路由器 v4 正在重定向到 about 页面，但不渲染 about 页面内容，事实上它与主页内容在同一个主页上，但随后 url 发生变化

例如：

localhost:3000 // 如果点击，应用页面来自这里

localhost:3000/About //关于页面内容属于App页面

index 应用和关于 js 的以下代码

index.js

import { BrowserRouter,Route,Switch,Redirect } from 'react-router-dom'
import App from './App';
ReactDOM.render(
    ( 
        <BrowserRouter>
        <Switch>
            <Route path="/" component={App}/>           
            <Redirect for="*" to="/" />
        </Switch>       
        </BrowserRouter>
    )
, document.getElementById('root')
);

app.js

import React, { Component } from 'react';
import About from './About';
import {Route,Link} from 'react-router-dom'

class App extends Component {
    constructor(props)
    {
        super(props);
        this.state=({name:"",
                    age:"",
                    button_flag:0                  
                    })
    }
    sample(){
        this.setState({button_flag:1});
    }
    
    onchangeevent(name,event)
    {
        this.setState({button_flag:0});
        var change = {};
        change[name] = event.target.value;
        this.setState(change);
    }
    
    
    render() {
    return (
        <div className="">
        <div className="">
            <input type="text" value={this.state.name} name="name" onChange={this.onchangeevent.bind(this,"name")}/>
            <input type="text" value={this.state.age} name="age" onChange={this.onchangeevent.bind(this,"age")}/>
            {this.state.button_flag === 1 && 
            <div>
            <h3>{this.state.name} : {this.state.age}</h3>             
            </div>
            }
        </div>
        <p className="">
            <button onClick={this.sample.bind(this)}>test</button>
            
            
            <Link to="About">About</Link>
        </p>
        
                    <Route path="About" component={About}/>

        </div>
    );
    }
}

export default App;

关于

import React,{Component} from 'react';      
class About extends Component{              
    render(){
        return(
            <div>   <p> hi  </p>     </div>
        );
        }                               
    }
export default About;

Answer 1

你的路由配置应该是这样的。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import promise from 'redux-promise';

import reducers from './reducers';
import App from './App';
import AboutComponent from './components/AboutComponent';

const createStoreWithMiddleware = applyMiddleware(promise)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <BrowserRouter>
      <div>
        <Switch>
            <Route path="/about" component={AboutComponent} />
            <Route path="/" component={App} />
        </Switch>
      </div>
    </BrowserRouter>
  </Provider>
  , document.querySelector('.container'));

然后将您的Link 发送到激活路由的位置，

<Link to={`about`}>
  About
</Link>

希望这会有所帮助。快乐编码！