React 4.0.0 BrowserRouter 渲染所有路由

Question

我正在尝试制作一个简单的短信应用程序，使用 react 和流星进行用户注册，当我尝试添加路由时：

**//main.js**
import React from "react";
import ReactDOM from "react-dom";
import {Meteor} from "meteor/meteor";
import {Tracker} from "meteor/tracker";
import { BrowserRouter, Route, browserHistory } from 'react-router-dom'

import {Texts} from "./../imports/api/Text";
import App from "./../imports/ui/App";
import Name from "./../imports/ui/Name";
import NotFound from "./../imports/ui/NotFound"

Meteor.startup(() => {
    Tracker.autorun(() => {
        let texts = Texts.find().fetch();
        console.log(texts);
        console.log(browserHistory);
        const routes = (
            <BrowserRouter>
                <div>
                    <Route path="/chat" render={()=>{
                        return <App texts={texts} />
                    }}/>
                    <Route path="*" component={NotFound}/>
                </div>
            </BrowserRouter>
        );
        ReactDOM.render(routes, document.getElementById("app"));
    });
});


**//NotFound.js**
import React from "react";

export default class NotFound extends React.Component{
    render(){
        return <p>URL not found</p>
    }
}

它将这两个东西都呈现到屏幕上，我看到我的错误 404 文本和我的短信应用程序。我的问题是，如何在无法识别路线（例如“/asddkib”）时让 NotFound 页面呈现，并在我转到正确的路径（“/chat”）时让它消失（只是应用程序） ?现在，如果我去 /chat 那么两者都会被渲染到屏幕上。

Answer 1

使用 switch 语句

 import { BrowserRouter, Route, Switch, browserHistory } from 'react-router-dom', 
 <BrowserRouter>
            <Switch>
                <App path="/chat" texts={texts}/>
                <Route  component={NotFound}/>
            </Switch>
  </BrowserRouter>

Answer 2

您正在寻找 react 路由器的开关功能。

将您的导入从“react-router”更改为：

import { BrowserRouter, Route, Switch, browserHistory } from 'react-router-dom',

然后，将 Switch 组件添加到您的渲染中：

<BrowserRouter>
        <Switch>
            <Route path="/chat" render={()=>{
                return <App texts={texts} />
            }}/>
            <Route  component={NotFound}/>
        </Switch>
</BrowserRouter>